Question

我正在使用nvd3，我对日期格式和显示有疑问。你可以在下面找到我的例子。

d3.json('jsonData.json', function(data) {

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

    chart.xAxis.tickFormat(function(d) {
            var dx = data[0].values[d] && data[0].values[d].x || 0;
            return dx ? d3.time.format('%Y-%m-%e %X')(new Date(dx)) : '';
        });

    chart.yAxis
        .tickFormat(d3.format(',.1f')(d));

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

    //TODO: Figure out a good way to do this automatically
        nv.utils.windowResize(chart.update);
    //nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });

        chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

    return chart;
  });
});

JSON文件jsonData的构建如下：

    [{ 
       "key":"Consumption", 
       "values":[ [2012-06-27 00:00:00 , 153580] , [2012-06-27 02:00:00 , 153590] , [...] , [...] , ... , [...] ]
    }]

日期格式如下：“年 - 月 - 日时：分：秒”

问题在于我无法显示任何问题...我知道缺少某些东西来显示该图表，消耗在Y轴上，日期在X轴上，但我找不到... < / p>

我尝试了许多方法，从nvd3.org的som示例中获得启发，但没有任何工作：/

感谢您的回答！

-----------------------------------------------编辑-------------------------------------

感谢Andrew和George，感谢nvd3.org上的例子，我解决了我的问题。

我使用PHP脚本在时间戳（毫秒）中正确格式化日期，并重复使用示例“linePlusBarChart”。

毕竟，我的代码和我的JSON文件如下所示：

d3.json('jsonData.json', function(data) {

data.map(function(series) {
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
return series;
});

nv.addGraph(function() {    
    var chart = nv.models.lineChart()
        .margin({top: 30, right: 60, bottom: 50, left: 90})
        .x(function(d,i) { return i })
        .color(d3.scale.category10().range());

        chart.xAxis.tickFormat(function(d) {
            var dx = data[0].values[d] && data[0].values[d].x || 0;
            return dx ? d3.time.format('%X')(new Date(dx)) : '';
        });

    chart.yAxis
        .tickFormat(d3.format(',.1f'));

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

        nv.utils.windowResize(chart.update);

        chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

    return chart;
   });
});

和JSON文件：

    [{
      "key":"Consommation", 
      "values":[[1340755200000 , 153580] , [1340762400000 , 153590] , 
                [1340769600000 , 153610] , [1340776800000 , 153650] , 
                [1340784000000 , 153680] , [1340791200000 , 153720] , 
                [1340798400000 , 153780] , [1340805600000 , 153830] , 
                [1340812800000 , 153880] , [1340820000000 , 153900] , 
                [1340827200000 , 153920] , [1340834400000 , 153930] , 
                [1343347200000 , 153940] 
               ]
     }]

谢谢！

Answer 1

使用D3中内置的time parsing functions。

对于一个工作示例，请查看如何声明parseDate var然后在this chart中使用

Answer 2

考虑使用长毫秒来传递JSON中的参数。

如何从外部JSON文件设置正确的日期？

2 个答案: