NVD3 散点图的自定义 X 轴工具提示

custom x axis tooltip for nvd3 scatter chart

本文关键字:工具提示 自定义 散点图 NVD3      更新时间:2023-09-26

我正在使用 nvd3 散点图,我看到可以使用以下函数自定义工具提示内容。

chart.tooltipContent(function (key, x, y, e, graph) {
    return '<p><strong>' + key + '</strong></p>' +
           '<p>' + e.value + ' in the month ' + x + '</p>';
    });

当鼠标移到气泡上时,自定义工具提示内容以及点/气泡的 x 值和 y 值将突出显示/显示。我想显示自定义内容,而不是显示 x 轴标签。我该怎么做?

谢谢

chart.tooltipContent现在在 nvd3 中已弃用。若要在工具提示中使用自定义内容,您需要使用

chart.tooltip.contentGenerator(function(obj) {code to build tooltip})

要查看必须在函数中使用哪些数据,请首先添加以下行:

chart.tooltip.contentGenerator(function (obj) { return JSON.stringify(obj)})

然后,您将能够将鼠标悬停在数据点上并查看您正在使用的对象。

在 src/tooltip 中查看.js从第 76 行开始的用于 contentGenerator 的默认函数,以查看您可以构建并传递给 contentGenerator 的函数类型的一个很好的例子

以下是文档文档中的相关部分