Question

我使用的是nvd3 multichart。我有2行和1条形图。

问题是，如果我把x相等的数字一切正常，但在我的情况下，x需要是一个日期。

当我把条形图显示日期时，但不是线条。

这是我的代码：

    var testdata = [{
        key: 'Stream',
        values: [{x: '2015-01-01', y: -0.14459575778442077}, {x: '2015-02-01', y: 1.14459575778442077}, {x: '2015-03-01', y: -0.14459575778442077}]
    },
    {
        key: 'Stream1',
        values: [{x: "2015-01-01", y: 2}, {x: "2015-02-01", y: 1}, {x: "2015-03-01", y: 14}]
    },
    {
        key: 'Stream2',
        values: [{x: "2015-01-01", y: 0.14459575778442077}, {x: "2015-02-01", y: 1.45}, {x: "2015-03-01", y: 0.14459575778442077}]
    }
];

testdata[0].type = "line";
testdata[0].yAxis = 1;
testdata[1].type = "line";
testdata[1].yAxis = 1;
testdata[2].type = "bar";
testdata[2].yAxis = 1;

nv.addGraph(function() {
    var chart = nv.models.multiChart()
        .margin({top: 30, right: 60, bottom: 50, left: 70})
        .color(d3.scale.category10().range());

    chart.xAxis.tickFormat(function(d) {
            return d3.time.format('%m/%d/%y')(new Date(d))
      });
    chart.yAxis1.tickFormat(d3.format(',.1f'));


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

    return chart;
});

以下是我在控制台中遇到的错误：

Error: Invalid value for <path> attribute transform="translate(NaN,841)"
Error: Invalid value for <path> attribute transform="translate(NaN,764.3481053004498)"
Error: Invalid value for <path> attribute transform="translate(NaN,841)"
Error: Invalid value for <path> attribute transform="translate(NaN,713.4880468001999)"
Error: Invalid value for <path> attribute transform="translate(NaN,772.9453840335499)"
Error: Invalid value for <path> attribute transform="translate(NaN,0)"
Uncaught TypeError: Cannot read property 'x' of null

有谁知道如何使它适用于我的数据格式？感谢

Answer 1

折线图不是离散的，如条形图所示。您需要使用数字作为x值。

我通常这样做的方法是使用时间戳而不是日期字符串，并在tickFormat（）函数中将其转换为字符串（正如您实际所做的那样）。

因此，要修复您的示例，您应该将所有x值转换为时间戳或执行类似的操作，这将在图表开始创建时将其转换为：

var chart = nv.models.multiChart()
    .x(function(d) { return new Date(d.x).getTime() })
    .margin({top: 30, right: 60, bottom: 50, left: 70})
    .color(d3.scale.category10().range());

但是，我不喜欢将日期作为字符串接收，将其转换为x属性上的秒，然后在显示时将其转换回日期。我建议您从一开始就使用时间戳。

请注意，您的日期格式不是标准格式。要使Javascript的Date.parse（）函数适用于您的日期，您应该在＆lt; MM / DD / YYYY＆＃39;中指定它们。格式。

NVD3 multichart：如果x是日期，则为行错误

1 个答案: