NVD3折线图单记录问题

时间:2015-10-22 14:59:59

标签: javascript jquery html5 d3.js nvd3.js

Nvd3 chart

您好,

使用nvd3折线图时我遇到了奇怪的问题。对于单个记录,它在图表中间显示数据,对于多个数据,它完美地运行。单个数据的问题是它显示了我不愿意显示的未来日期。

nv.addGraph(function() {
            var chart = nv.models.lineChart().x(function(d) {
                return d.x
            }).y(function(d) {
                return d.y
            }).color(d3.scale.category10().range())
                    .useInteractiveGuideline(true);

            chart.forceY([0,unitInterval]);

            chart.yAxis.scale().domain([ 0, 9999999 ]);

            var format = ',f';
            chart.yAxis.tickFormat(function(d) {
                return nFormatter(d);
            }).axisLabel('No. Of Records');

            chart.margin({
                bottom : 50,
                left : 75
            });//set margin 

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

            chart.noData("Data unavailable for current selection.");

            d3.select('#recordChartDiv svg').datum(data).transition()
                    .duration(500).call(chart);

            nv.utils.windowResize(chart.update);

这是我正在使用的代码。有人可以帮助在单一记录的情况下正确安排打勾吗? 这在多个数据的另一个图表中工作正常。 enter image description here

1 个答案:

答案 0 :(得分:0)

如果只有一个数据点,您希望图表看起来像什么?

你可以添加一个域和forceX来显示点数日期,如下所示: chart.forceX([minDate, date]); chart.xAxis.scale().domain([minDate, date]);

看一下这个小提琴的例子:https://jsfiddle.net/b3fwowzz/14/