我正在使用: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轴上看到,你会有几秒或者其他什么,所以在工具提示中我应该有完全相同的东西