Question

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

我的要求：

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

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

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

我只能获得value1的图表。我查看了文档中提供的tooltip configuration，但无法达到要求。

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

Answer 1

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

调整Chart.js文件

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

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

但是等等，对于这种方法，有很多捕获（：P并且你都遵循它们以使它工作）。

数据 value1 ， value1string ， value2 ， value2string 必须是全局变量函数在Chart.js文件中访问它们。
如果你看一下上述博客中的微模板引擎，就可以看到＆＃39; \ n＆＃39;字符被替换为＆＃34; ＆＃34; （空间）。因此，上面的工具提示模板将在一行中提供所有数据。要获得预期的行为，您需要从

（在Chart.js文件中）

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

到

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

其他第三方图书馆

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

使用react-chartjs-2 。这是Chart.js v2.x的包装器。您可以使用Chart.js提供的选项中的回调来实现它。有关用法，请参阅this example。

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

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

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

希望它有所帮助！

允许在Chart.js

1 个答案: