nvd3 折线图未绘制正确的数据

Question

我目前正在尝试在 Meteor JS 中呈现 nvd3 折线图。我是运行 Meteor 1.1.0.3 和运行版本 1.7.1 上的 nvd3 包。

使用 nvd3 上的示例：http://nvd3.org/examples/line.html，我得到了以下代码。然而，即使正确地遵循了这个例子，图形绘制但日期都是 12/31/1969 并且 y 轴生成 -1、0 和 1 值。见附图：

谁能告诉我这里缺少什么？

nv.addGraph(function() {
    var chart = nv.models.lineChart()
        .margin({ left: 25 })
        .showLegend(true)
        .showXAxis(true)
        .showYAxis(true);

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

    chart.yAxis
        .axisLabel('Data')
        .tickFormat(d3.format('d'));

    d3.select('#data-chart svg').datum(formattedData).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

formattedData = [
{
    key: 'Data', //key  - the name of the series.
    values: [{ date: 1439963723311, total: 3}, { date: 1441283002275, total: 1}, { date: 1441194849210, total: 2}], //values - represents the array of {x,y} data points
    color: '#ff0000' //color - optional: choose your own line color.
}
];

Answer 1

你需要告诉 D3 如何访问数据——什么是 x 什么是 y。

（NVD3 站点上的示例已经具有 'x' 和 'y' 的键）

尝试添加访问函数：

    var chart = nv.models.lineChart()
        .x(function (d) { return d.date })
        .y(function (d) { return d.total })

如果您想确保 y 轴从 0 开始，请包括

        .forceY([0]);

此外，您需要确保事先对数据进行排序（最后两项是乱序的）。

查看此 Plunk 以获取实际示例： http://plnkr.co/edit/QjcEXIIQ5aIhuFhpRwsj?p=preview

nvd3 折线图未绘制正确的数据

nvd3 Line Chart Not Drawing w/ Correct Data

javascript

charts

meteor

nvd3.js