允许在Chart.js的工具提示中显示多个数据属性

Question

我目前正在使用Chart.js (react版本)，我无法找出这个问题。我使用柱状图来显示数据。默认情况下，工具提示只显示相应栏的当前高度。

我要求:

我有数据是可用的json格式与以下属性

{
    value1: "",
    value2: "",
    value3: ""
}

条形图中条形图的高度应由value1属性决定。当我们将鼠标悬停在一个特定的工具条上时，工具提示应该显示这三个属性的所有信息。

我只能得到value1的图。我已经查看了文档中可用的工具提示配置，但无法达到要求。

(我使用react-chartjs)我该怎么做呢?提前感谢

Answer 1

react-chartjs目前依赖于Chart.js v1.1.1 -它不允许在工具提示多行。

1. 调整Chart.js文件

(不推荐使用这个方法，它只是一个hack)如果你"不得不"使用react-chartjs，你可以这样做。你可以发送一个自定义的工具提示模板作为一个选项(他们使用John Resig的微模板:看这里)

options = {
    tooltipTemplate: "<%=label%>:<%= value %><%n%><%=value1string%>:<%= value1%><%n%><%=value2string%>:<%= value2 %>",
}

但是，对于这个方法，有许多捕获(:p，您要遵循它们才能使其工作)。

• 数据value1， value1string， value2， value2string必须是全局变量，以便在文件Chart.js中的函数访问它们。

• 如果你看一下上面提到的微模板引擎，你可以看到'n'字符被一个" "(空格)代替了。因此，上面的工具提示模板将在一行中提供所有数据。要获得预期的行为，您需要从

修改源文件中的代码。

(在Chart.js文件中)

 .replace(/[rtn]/g, ” “)

.replace(/[rt]/g, ” “)

第三方库

有许多其他第三方库可以完成所需的工作。

使用react-chartjs-2

。这是Chart.js v2.x上的包装器。你可以使用Chart.js提供的选项中的回调来实现它。

var options={
    tooltips: {
        mode: 'label',
        callbacks: {
            afterLabel: function() {
                return 'whatever you want to display';
            },
        },
    },
}

使用fusioncharts

。这个库实际上非常整洁，可以很好地控制情节中的元素。您可以轻松地配置工具提示，使其按照自己的意愿运行。这个库唯一的缺点是，它是免费的，只供个人使用。

使用react-d3-tooltip

。这个库还提供了对元素的大量控制，请参阅文档。您可以根据需要自定义工具提示。

希望有帮助!