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

Question

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

我的要求

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

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

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

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

(我用的是反应图)我该怎么做？提前感谢

Answer 1

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

1. 调整Chart.js文件

(不建议使用此方法，这只是一种攻击)如果您“不得不”使用react chartjs，您可以执行以下操作。您可以发送一个自定义工具提示模板作为选项(他们使用John的微模板：在这里看)

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

但是，等等，对于这种方法，有许多捕获(:P和您跟随它们来使其工作)。

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

(在Chart.js文件中)

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

至

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

1. 其他第三方图书馆

还有许多其他的第三方库可以执行所需的任务。

使用 反应图-2。这是Chart.js v2.x上的包装器。您可以使用Chart.js提供的回调选项来实现它。有关使用情况，请参见这个例子。

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

使用 融合图。实际上，这个库非常整洁，可以很好地控制地块中的元素。您可以很容易地将工具提示配置为任意操作。这个库的唯一缺点是，它是免费的，仅供个人使用。

使用 反应-d3-工具提示。这个库还提供了对元素的很好的控制，遍历文档。您可以根据需要自定义工具提示。

希望能帮上忙！