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

Question

我目前正在使用 Chart.js (react version)，我无法解决这个问题。我正在使用条形图来显示数据。默认情况下，工具提示仅显示相应栏的当前高度。

我的要求:

我有 json 格式的数据，具有以下属性

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

bar chart 栏的高度应由 value1 属性决定。当我们将鼠标悬停在特定栏上时，工具提示应显示所有三个属性的所有信息。

我只能得到值 1 的图表。我查看了文档中可用的 tooltip configuration，但无法达到要求。

（我正在使用 react-chartjs）我该怎么做呢？提前致谢

Answer 1

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

调整 Chart.js 文件

（不推荐这种方法，它只是一个hack）如果你'have'要使用react-chartjs，你可以执行以下操作。您可以发送自定义工具提示模板作为选项（他们使用 John Resig 的微模板：see it here）

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

但是等等，对于这个方法，有很多陷阱（:P 并且你跟着它们来让它工作）。

数据value1,value1string,value2,value2string 必须是文件中函数的全局变量 Chart.js 才能访问它们。
如果您查看上述博客中的微模板引擎，您会发现 '\n' 字符被替换为 " " (space)。所以上面的工具提示模板将在一行中给出所有数据。要获得预期的行为，您需要修改源文件中的代码 from

（在 Chart.js 文件中）

 .replace(/[\r\t\n]/g, ” “)

到

.replace(/[\r\t]/g, ” “)

其他第三方库

还有许多其他第三方库可以满足要求。

正在使用react-chartjs-2. This is a wrapper on Chart.js v2.x. You can use the callbacks in option provided by Chart.js to achieve it. See this example。

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

使用fusioncharts。该库实际上非常整洁，可以很好地控制图中的元素。您可以轻松地将工具提示配置为您想要的。这个图书馆唯一的缺点是，它只供个人免费使用。

使用react-d3-tooltip。这个库还提供了对元素的大量控制，请查看文档。您可以根据需要自定义工具提示。

希望对您有所帮助！

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

Allow display of multiple data attributes in tooltip of Chart.js

javascript

reactjs

chart.js

react-chartjs