nvd3-在时间序列中添加零值,以便根据提供的数据对齐条形图

时间:2018-08-31 10:06:46

标签: javascript d3.js graph nvd3.js lineplusbarchart

我已经使用nvd3库创建了一个linePlusBar图表(条形图+ 2条线)。条形图的数据在X轴上未对齐。

我的条形图数据从16/01/18到11/03/18开始。我想创建数据(零值)并填补从2010年7月17日到2018年1月15日(对于条形图)的差距,以便获得更合适的结果。

是否有解决此问题的方法?我可以使用xDomainforceX来正确显示数据吗?

具有现在数据的结果显示在下图中。 enter image description here

我的代码是:

                    chart = nv.models.linePlusBarChart()
                    .focusEnable(true) //gia na exei to focus Chart (range slider)     
                    .margin({ top: 50, right: 80, bottom: 30, left: 80 })
                    .color(["rgb(226, 144, 36)", "rgb(66, 30, 109)", "rgb(58, 112, 150)"]);
                    chart.xAxis.tickFormat(function (d) {
                    return d3.time.format('%d/%m/%Y')(new Date(d * 1000))
                }).showMaxMin(true);

                chart.y1Axis.axisLabel("Sentiment Value");

                chart.y2Axis.tickFormat(function (d) { return d3.format(',f')(d) });
                   chart.bars.forceY([0]).padData(false); 
                chart.lines.forceY([0]).padData(false);

                chart.x2Axis.tickFormat(function (d) {
                    return d3.time.format('%d/%m/%Y')(new Date(d * 1000))
                }).showMaxMin(true);

                chart.showLegend(false);

                var xScale = d3.time.scale();
                chart.xScale(xScale);
                multichart_graph = d3.select('#multichart svg');
                testdata.map(function (series) {
                series.values = series.values.map(function (d) { return { x: d[0], y: d[1] } });
                return series;
                });

                multichart_graph.datum(testdata)
                    .transition()
                    .call(chart);

0 个答案:

没有答案