JavaScript Chart.js - 在工具提示上显示的自定义数据格式

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!

我在这里查看了各种文档和类似的问题,但似乎无法找到特定的解决方案。如果我遗漏了任何明显或重复这个问题的道歉!

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.

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

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.

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

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.

任何帮助都会很棒!我已经被困在这几个小时了,这可能是我非常简单的事情。

6 个解决方案

#1

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.

这样,您可以在值之后添加'%'符号,如果这是您想要的。

Here's a jsfiddle to illustrate this.

这是一个说明这一点的方法。

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

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

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).

请注意,您的数据集应仅包含数值。 (没有%标志或其他东西)。

#2

For chart.js 2.0+, this has changed (no more tooltipTemplate/multiTooltipTemplate). For those that just want to access the current, unformatted value and start tweaking it, the default tooltip is the same as:

对于chart.js 2.0+,这已经改变了(不再是tooltipTemplate / multiTooltipTemplate)。对于那些只想访问当前未格式化值并开始调整它的人,默认工具提示与以下内容相同:

options: {
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return tooltipItem.yLabel;
            }
        }
    }
}

I.e., you can return modifications to tooltipItem.yLabel, which holds the y-axis value. In my case, I wanted to add a dollar sign, rounding, and thousands commas for a financial chart, so I used:

即,您可以返回对tooltipItem.yLabel的修改,该修改保存y轴值。就我而言,我想为金融图表添加一个美元符号,四舍五入和数千个逗号,所以我使用了:

options: {
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return "$" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                    return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                });
            }
        }
    }
}

#3

In chart.js 2.1.6, I did something like this (in typescript):

在chart.js 2.1.6中,我做了类似这样的事情(在typescript中):

  let that = this;
  options = {
    legend: {
      display: false,
      responsive: false
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          let account: Account = that.accounts[tooltipItem.index];
          return account.accountNumber+":"+account.balance+"€";
        }
      }
    }
  }

#4

You can give tooltipTemplate a function, and format the tooltip as you wish:

您可以为tooltipTemplate提供一个函数,并根据需要格式化工具提示:

tooltipTemplate: function(v) {return someFunction(v.value);}
multiTooltipTemplate: function(v) {return someOtherFunction(v.value);}

Those given 'v' arguments contain lots of information besides the 'value' property. You can put a 'debugger' inside that function and inspect those yourself.

给定'v'参数的那些包含除'value'属性之外的许多信息。您可以在该函数中放置一个“调试器”并自行检查。

#5

tooltips: {
          callbacks: {
            label: (tooltipItem, data) => {
              // data for manipulation
              return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            },
          },
        },

#6

tooltips: {
            enabled: true,
                  mode: 'single',
                  callbacks: {
                    label: function(tooltipItems, data) { 
                      return data.datasets[tooltipItems.datasetIndex].label+": "+tooltipItems.yLabel;
                    }
                  }
                }

#1