1

我正在使用 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 轴上显示日期的图表缺少一些东西，但我找不到什么...

我尝试了很多方法来做到这一点，灵感来自 nvd3.org 的一些示例，但没有任何效果：/

感谢您的回答！

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

感谢 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] 
               ]
     }]

谢谢！

4

2 回答 2

0

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

于 2013-04-10T10:49:14.080 回答
0

使用D3 内置的时间解析函数。

对于一个工作示例，看看 parseDate 变量是如何声明的，然后在此图表中使用

于 2013-04-10T10:45:11.130 回答