我正在使用 nvd3 折线图并使用了 useInteractiveGuideline: true
。所以所有的点都绘制在特定日期的工具提示中。
这是我面临的问题,第一点和第二点有两个值,因此工具提示显示图例名称以及两个日期和值的两个值。
问题是在第三个日期,我在第三行只有一个点,但它显示了第三个点值和另一个点值。
图表第二行在第 7 个日期结束,但它显示第 7 个日期值直到图表结束。
我只需要显示有值(value)的点。
所以从第 8 天开始,工具提示只需要在工具提示中显示一个点。这是我的 nvd3 图形选项,
$scope.options = {
chart: {
type: 'lineChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 45,
left: 45
},
duration: 500,
useInteractiveGuideline: true,
xAxis: {
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);
}
}
}
};
这是我的代码的完整演示
演示:Plunker demo
Duplicate link在此链接中,他们已将 null 作为点值传递。所以它显示N/A。但是图表没有加入。对于 null
值,它显示空点,显示线点未连接。我需要连接这些线并需要删除工具提示中的点或需要显示 N/A
最佳答案
我插入了一个条件来验证 xAxis
标签和工具提示值。工具提示仅添加了匹配的 xAxis
索引。
我使用了类似 d.value !== p.data.x
的条件。这里的 p.data.x
是 xAxis 标签。 d.value
是工具提示标签。如果两个值都不匹配,我删除了数据。
在库中找到以下代码,
trowEnter.append("td")
.classed("value",true)
.html(function(p, i) { return valueFormatter(p.value, i) });
并将其替换为,
trowEnter.append("td")
.classed("value",true)
.html(function(p,i) {
if (d.value !== p.data.x) {this.parentNode.style.display = "none";}
return valueFormatter(p.value,i)
});
它将删除工具提示中不匹配的内容。
关于javascript - nvd3 删除空点的工具提示内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41845384/