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

clearScreen 发表于 Dev

clearScreen

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

我的要求：

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

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

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

我只能得到value1的图形。我已经研究了文档中提供的工具提示配置，但未能达到要求。

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

akashrajkn

react-chartjs当前取决于Chart.js v1.1.1-不允许在工具提示中使用多行。

调整Chart.js文件

（不建议使用此方法，这只是一个技巧）如果“必须”使用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(/[\r\t\n]/g, ” “)

到

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

其他第三方库

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

使用react-chartjs-2。这是Chart.js v2.x的包装。您可以使用Chart.js提供的in选项进行回调。有关用法，请参见此示例。

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

使用Fusioncharts。该库实际上非常整洁，可以很好地控制图中的元素。您可以轻松地配置工具提示以根据需要进行操作。该库唯一的缺点是，它仅供人免费使用。

使用react-d3-tooltip。该库还通过文档对元素进行了大量控制。您可以根据需要自定义工具提示。

希望能帮助到你！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。