我正在使用nvd3作为multiBarHorizontalChart,我需要有关如何禁用0值的工具提示的指导。
.tooltip(function(key, x, y, e) {
return '<h3>' + key + ' ' + e.point.label + '</h3>' + '<p>' + y + '</p>';
})
此功能我用于显示工具提示值。
答案 0 :(得分:0)
不幸的是,我没有找到任何非黑客的方法来做到这一点。
不那么优雅的方法是将事件tooltipShow
的原始处理程序替换为自定义处理程序,它将检查值:
var originalTooltipHandler = chart.dispatch.on("tooltipShow");
chart.dispatch.on("tooltipShow", function (e) {
// check whatever you like here
if (e.value != 0) {
// and call original handler only when needed
originalTooltipHandler.apply(this, arguments);
}
});
但是,如果您的图表已更新(例如,您希望resize
事件或允许通过点击图例来更改显示的数据,那么这是不够的,所以几乎在所有情况下),因为执行chart.update()
时,它将恢复原始的tooltipShow
处理程序。要解决此问题,我们也必须覆盖chart.update()
:
nv.addGraph(function () {
chart = nv.models.multiBarHorizontalChart()
// ... parameters setting here
// before data was set, `chart.update()` is not available
d3.select('#chart1 svg')
.datum(long_short_data)
.call(chart);
// now we can override
filterTooltips(chart, function (e) {
return e.value !== 0;
});
// ...
return chart;
function filterTooltips(chart, predicate) {
var originalUpdate = chart.update;
chart.update = function () {
// call to original `update()` will reset filter
originalUpdate.apply(this, arguments);
// set custom filter again
filterTooltips(chart, predicate);
};
var originalTooltipHandler = chart.dispatch.on("tooltipShow");
chart.dispatch.on("tooltipShow", function (e) {
if (predicate(e)) {
originalTooltipHandler.apply(this, arguments);
}
});
}
});
请参阅live demo。