2

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

我的要求：

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

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

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

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

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

4

1 回答 1

3

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(/[\r\t\n]/g, ” “)

到

.replace(/[\r\t]/g, ” “)
  1. 其他第三方库

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

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

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

使用融合图。该库实际上非常整洁，并且可以很好地控制绘图中的元素。您可以轻松地配置工具提示以按照您的意愿行事。这个库的唯一缺点是，它只供个人免费使用。

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

希望能帮助到你！

于 2016-08-12T09:28:08.130 回答