2

次のコードを使用して、nvd3 でマルチチャートを作成しています。

    var data = 
    [{"variableName":"HHs_Index_Income_75K_9999K","contribution":6717418.0,"roi":0.0,"date":1.1997306E12,"spend":131.0},

    {"variableName":"HHs_Index_Income_75K_9999K","contribution":6563584.0,"roi":0.0,"date":1.2033594E12,"spend":128.0},
    ...
    ...
    ...
    {"variableName":"HHs_Index_Income_75K_9999K","contribution":6819974.0,"roi":0.0,"date":1.243881E12,"spend":133.0}];

    function formatOverviewPerformanceTrendsData(data, y1Var , y2Var ) {
        var finalData = new Array();
        var y1Array = new Array();
        var y2Array = new Array();

        for(var i=0;i<data.length;i++){
            var dataElement = data[i];
            //var datePattern =new RegExp('/','g');
            //var dateString = dataElement['date'].replace(datePattern,''); 
            var dateString = dataElement['date'];


            var objArray1 = {x: dateString , y:dataElement[y1Var.toLowerCase()]};
            var objArray2 = {x: dateString , y:dataElement[y2Var.toLowerCase()]};
            y1Array.push(objArray1);
            y2Array.push(objArray2);
        }
        var y1Obj = { key:y1Var , type:'line' , yAxis:'1' , values:y1Array};
        var y2Obj = { key:y2Var , type:'line' , yAxis:'2' , values:y2Array};

        finalData.push(y1Obj);
        finalData.push(y2Obj);

        return finalData;
    }

    function render_overview_trends_screen(data) {

        var contributionROIData = formatOverviewPerformanceTrendsData(data,'Contribution','ROI');
        var revenueTrendsData = formatOverviewPerformanceTrendsData(data,'Contribution','Spend');

        nv.addGraph(function() {
            var chart = nv.models.multiChart().margin({
                top : 10,
                right : 80,
                bottom : 40,
                left : 80
            }).color(d3.scale.category10().range());

            chart.xAxis.axisLabel('Date').
            tickFormat(function(d) { 
                return d3.time.format('%x')(new Date(d)); 
            });

            chart.yAxis1.axisLabel('Contribution');

            chart.yAxis2.axisLabel('ROI');

            d3.select('#chart1 svg').datum(contributionROIData)
                    .transition().duration(500).call(chart);

            return chart;
        });

    }

    document.body.onload = function(){
        render_overview_trends_screen(data);
    }

しかし、作成されたチャートには、チャート領域の外側にプロットされた線があります。

これで私を助けてください。問題は正確には何ですか？nvd3 チャートのスケール/範囲をどのように調整しますか?

どうもありがとう！

4

0 に答える 0