我在NVD3中有一个图表,X轴上有一个日期,Y轴上有一个浮点数。它显示正常,但是当我将鼠标悬停在图表上以弹出工具提示时,它不显示我正在当前悬停的数据集。这是一个GIF,以使其更加清晰,希望:
这是我用过的代码:
<script>
var data = function() {
return [
{
values: [
{x:"2018-09-08", y:19.98},{x:"2018-09-07", y:11.99},{x:"2018-09-06", y:9.98},{x:"2018-09-05", y:4.99},{x:"2018-09-03", y:9.98},{x:"2018-09-02", y:14.99}, ],
key: 'Turnover'
}
];
}
nv.addGraph(function() {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
.xScale(d3.time.scale())
.x( function(d){return d3.time.format('%Y-%m-%d').parse(d.x);} );
;
chart.xAxis
.axisLabel('Date')
.tickFormat(function(d) {return d3.time.format("%Y-%m-%d")(new Date(d))});
;
chart.yAxis
.axisLabel('Sales')
.tickFormat(d3.format('.02f'))
;
chart.showLegend(false);
d3.select('#nvd3 svg')
.datum(data())
.transition().duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});
</script>
编辑1:当我不使用.useInteractiveGuideline(true)
函数时,它确实有效,工具提示显示在正确的数据集上。但是,我确实想要使用这个功能。那么任何帮助呢?
查看NVD3站点的示例,他们使用时间轴的线性比例。
将代码转换为此代码也会显示请求的行为。
您必须自己设置刻度位置,因为线性刻度的自动刻度不在日期上
var data = function() {
return [
{
values: [
{x:"2018-09-02", y:14.99},
{x:"2018-09-03", y:9.98},
{x:"2018-09-05", y:5.99},
{x:"2018-09-06", y:9.98},
{x:"2018-09-07", y:11.99},
{x:"2018-09-08", y:19.98}
],
key: 'Turnover'
}
];
};
var formatDate = d3.time.format("%Y-%m-%d");
nv.addGraph(function () {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
;
var mydata = data();
mydata[0].values.forEach(e => { e.x = Date.parse(e.x); });
chart.xAxis
.axisLabel('Date')
.tickFormat(function(d) {return formatDate(new Date(d))})
.tickValues(mydata[0].values.map( d => d.x ))
;
chart.yAxis
.axisLabel('Sales')
.tickFormat(d3.format('.02f'))
;
chart.showLegend(false);
d3.select('#nvd3 svg')
.datum(mydata)
.transition().duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});