禁用NVD3 multiBarHorizontalChart中0值的工具提示

Disable tooltip for 0 value in NVD3 multiBarHorizontalChart

本文关键字：工具提示 NVD3 multiBarHorizontalChart 禁用      更新时间：2023-09-26

我将nvd3用于multiBarHorizontalChart，我需要关于如何禁用0值的工具提示的指导。

.tooltip(function(key, x, y, e) {
    return '<h3>' + key + ' ' + e.point.label + '</h3>' + '<p>' + y + '</p>';
})

我正在使用这个函数来显示工具提示值。

不幸的是，我没有找到任何非破解的方法。

不那么优雅的方法是将事件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);
            }
        });
    }
});

观看现场演示。

相关文章：