JavaScript Chart.js - 在工具提示上显示的自定义数据格式 [英] JavaScript Chart.js - Custom data formatting to display on tooltip

问题描述

我已经在这里查看了各种文档和类似的问题，但似乎无法找到特定的解决方案。抱歉，如果我错过了任何明显的事情或重复了这个问题！

I have looked at various documentation and similar questions on here, but cannot seem to find the particular solution. Apologies if I have missed anything obvious or have repeated this question!

作为一些背景信息，我使用Chart.js插件实现了4个图表并传入了使用PHP从数据库中获取所需数据。这一切都正常工作，很好。

As a bit of background info, I have implemented 4 graphs using the Chart.js plugin and passed in the required data using PHP from a database. This is all working correctly and is fine.

我的问题是我需要将工具提示中的数据显示为格式化数据。与％数字一样。例如，我的数据库中的一个数据是-0.17222。我把它格式化为一个百分比显示在我的表中，一切都很好。但是，在设置chart.js条形图的数据时，数据显然缺少此格式并显示为-0.17222，这是我不想要的。

My problem is I need to display the data in the tooltips as formatted data aka. as numeric with %. As an example, one of my data from database is -0.17222. I have formatted it as a percentage to display in my table and all is well. However, when setting the data for the chart.js bar graph, the data is obviously missing this formatting and displaying as the -0.17222 which I do not want.

抱歉，我想张贴一张照片，但我的声誉太垃圾了！

Sorry, I wanted to post a picture, but my reputation is too rubbish!

我从数据库中获取数据，然后设置到我的表中：

I grab data from database, then set into my table:

var kpiRex = new Handsontable(example1, {
    data: getRexData(),

然后我在图表部分中提供这样的数据：

Then I feed this data like so in the chart section:

data: kpiRex.getDataAtRow(3)

任何帮助都会很棒！我一直坚持这个小时，这可能是我非常简单的事情。

Any help would be great! I've been stuck on this for hours and it's probably something really simple I am overlooking.

推荐答案

您想在图表选项中指定自定义工具提示模板，例如这个：

You want to specify a custom tooltip template in your chart options, like this :

 // String - Template string for single tooltips
 tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",
 // String - Template string for multiple tooltips
 multiTooltipTemplate: "<%= value + ' %' %>",

这样你可以添加一个'％'会在您的值之后签字，如果这就是您想要的。

This way you can add a '%' sign after your values if that's what you want.

这是 jsfiddle 来说明这一点。

Here's a jsfiddle to illustrate this.

请注意，如果您只有 tooltipTemplate ，则适用如果您有多个数据集，则应用一个数据集 multiTooltipTemplate 。

Note that tooltipTemplate applies if you only have one dataset, multiTooltipTemplate applies if you have several datasets.

这个选项在文档的全局图表配置部分。看看，值得检查可以在那里定制的所有其他选项。

This options are mentioned in the global chart configuration section of the documentation. Do have a look, it's worth checking for all the other options that can be customized in there.

请注意，您的数据集应仅包含数值。 （没有％标志或其他东西）。

Note that Your datasets should only contain numeric values. (No % signs or other stuff there).

这篇关于JavaScript Chart.js - 在工具提示上显示的自定义数据格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！