如何在angularjs nvd3中展开压扁的折线图?

时间:2017-07-21 22:57:52

标签: javascript angularjs d3.js nvd3.js

我试图在下面的折线图的x轴上设置每年每3个月的间隔,但我得到的是每年的压扁数据点。

enter image description here

以下是我的图表代码:

$scope.options = {     
        chart : {
                type : 'lineChart',
                margin: {
                    top : 50,
                    right : 100,
                    bottom : 50,
                    left: 100
                },
                x : function(d) {
                    return d.x;
                },
                y : function(d) {
                    return d.y;
                },
                useInteractiveGuideline : true,

                xAxis : {
                    axisLabel : 'Date',
                    ticks : 10,
                    tickSize : 1,
                    tickFormat : function(d) {
                        return d3.time.format("%m/%Y")(new Date(d));
                    }
                },
                yAxis : {
                    axisLabel : label,
                    tickFormat : function(d) {
                        return d3.format(4)(d);
                    }
                }
            },
            title : {
                enable : true,
                text : label
            }
        };
};

这是我的数据代码:

$scope.data = getData(label,dates,data);

function getData(label,dates,data) {
        var graphData = [];

        for (var i = 0; i < dates.length; i++) {
            var parseDate = d3.time.format("%m/%d/%Y");
            var newDate = parseDate.parse( dates[i] )
            var para = parseInt(data[i]);
            graphData.push({
                x : newDate,
                y : para
            });
        }
        return [ {
            values : graphData, //values - represents the array of {x,y} data points
            key : label, //key  - the name of the series.
            color : '#ff7f0e', //color - optional: choose your own line color.
        } ];
};

图表应如下所示。这是Excel表示。 enter image description here

0 个答案:

没有答案