d3时间序列图仅在工具提示中显示日期而非时间

时间:2017-06-28 01:00:37

标签: javascript d3.js graph timestamp time-series

我正在使用:https://github.com/mcaule/d3-timeseries/blob/master/src/d3_timeseries.js

中给出的d3-timeseries图

结果图如下所示:http://mcaule.github.io/d3-timeseries/

但是在x轴上我除了日期之外还有时间戳。下面的函数更新工具提示,如演示文稿中所示。

但是正如我说的那样,时间戳和日期不仅仅是x轴上的日期,所以在工具提示中我想要所有的细节,即日期和时间戳。但由于以下功能只有日期来自工具提示。

我检查了函数args,该日期包含完整日期和时间。请建议如何在工具提示中包含时间和日期。

//default tool tip function
        var _tipFunction = function(date,series) {

                var spans = '<table style="border:none">'+series.filter(function(d){
                        return d.item!==undefined && d.item!==null
                    }).map(function(d){
                        return '<tr><td style="color:'+d.options.color+'">'+d.options.label+' </td>'+
                                    '<td style="color:#333333;text-align:right">'+yscale.setformat(d.item[d.aes.y])+'</td></tr>'
                    }).join('')+'</table>'

                return '<h4>'+xscale.setformat(d3.time.day(date))+'</h4>'+spans
            }

d3图表的HTML代码:

<!DOCTYPE html>
<svg width="960" height="200"></svg>
<link rel="stylesheet" href="https://mcaule.github.io/d3-timeseries/src/d3_timeseries.css" type="text/css">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://mcaule.github.io/d3-timeseries/src/d3_timeseries.js"></script>
<script>

  var data =    [{
                    "timestamp": "2017-06-23T19:03:00-07:00",
                    "a_1": 21.100729166695746,
                    "a_2": 13.862652074746523
                },
                {
                    "timestamp": "2017-06-23T19:03:10-07:00",
                    "a_1": 21.09999908563894,
                    "a_2": 13.865705100895076
                },
                {
                    "timestamp": "2017-06-23T19:03:20-07:00",
                    "a_1": 21.099269029842795,
                    "a_2": 13.965687962747438
                },
                {
                    "timestamp": "2017-06-23T19:03:30-07:00",
                    "a_1": 21.098538999306424,
                    "a_2": 14.072341340713344
                },
                {
                    "timestamp": "2017-06-23T19:03:40-07:00",
                    "a_1": 21.097808994028977,
                    "a_2": 14.105108226640267
                },
                {
                    "timestamp": "2017-06-23T19:03:50-07:00",
                    "a_1": 21.097079014009566,
                    "a_2": 14.431892151709313
                },
                {
                    "timestamp": "2017-06-23T19:04:00-07:00",
                    "a_1": 21.096349059247324,
                    "a_2": 13.827938924324112
                },
                {
                    "timestamp": "2017-06-23T19:04:10-07:00",
                    "a_1": 21.09561912974137,
                    "a_2": 13.90099860030143
                }]

data.map(function(ele,index){
    ele.timestamp = new Date(ele.timestamp);
});

var count = 2;

var chart = d3.timeseries();

for(var i=1; i <= count; i++){
  chart.addSerie(data, {
    x: 'timestamp',
    y: 'a_'+i
  }, {
    interpolate: 'linear',
    color: getRandomColor(),
    label: "value_"+i
  });
}

chart.width(900)

function getRandomColor() {

    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
        return color;
}

chart("body")

</script>

当你运行它时,你会在y轴上看到,你会有几秒或者其他什么,所以在工具提示中我应该有完全相同的东西

0 个答案:

没有答案