我正在使用nvd3折线图。在该图表中,我无法获得用户的确切点击点。我正在使用useInteractiveGuideline:true
作为工具提示。当我在一天内鼠标悬停时,它显示该日期的所有点。当我点击单点时,它会返回该特定日期的所有数据。
以下是我的演示代码:Plunker Demo
图表选项如下
$scope.options = {
chart: {
lines: {
dispatch: {
elementClick: function (e, scope) {
console.log(e);
},
elementMouseover: function (e) {
console.log('mouseover');
},
elementMouseout: function (e) {
console.log('mouseout');
},
renderEnd: function (e) {
console.log('renderEnd');
}
}
},
type: 'lineChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 45,
left: 45
},
x: function (d) {
return d.x;
},
y: function (d) {
return d.y
},
duration: 500,
reduceXTicks: false,
useInteractiveGuideline: true,
showControls: false,
xAxis: {
tickSize: 1,
axisLabelDistance: 1,
axisLabel: 'Time (ms)',
showMaxMin: false,
tickFormat: function (d) {
return d3.format(',f')(d);
}
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -20,
tickFormat: function (d) {
return d3.format(',.1f')(d);
}
},
yDomain: [0, 100]
}
};
在演示中,在第3个日期,我有一个值35.当我点击该数据点时,它将返回该系列中的所有数据。
在上面的控制台中,如何识别单击哪个数据点。请一些人帮助获取点数据。