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

Question

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

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

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

对不起,我想张贴一张照片,但我的声誉太垃圾了!

我从数据库中获取数据,然后设置到我的表中:

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

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

data: kpiRex.getDataAtRow(3)

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

Answer 1

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

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

即,您可以返回修改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;
                });
            }
        }
    }
}

Answer 2

在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+"€";
        }
      }
    }
  }

Answer 3

您想在图表选项中指定自定义工具提示模板,如下所示:

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

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

这里有一个的jsfiddle来说明这个.

需要注意的是tooltipTemplate适用,如果你只有一个数据集,multiTooltipTemplate如果有多个数据集应用.

此选项在文档的全局图表配置部分中提到.看看,值得检查可以在那里定制的所有其他选项.

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

Answer 4

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

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

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

Answer 5

这里的答案在 Char.js 3.8.0 上对我不起作用。显然，工具提示选项回调对象已移动。现在它位于 options.plugins.tooltip 下

https://www.chartjs.org/docs/latest/configuration/tooltip.html

OP 示例：

    options: {
        plugins: {
            tooltip: {
                callbacks: {
                    label: function (tooltipItem, data) {
                        console.log(data);
                        console.log(tooltipItem);
                        return tooltipItem.formattedValue + '%';
                    }
                }
            }
        },
        ...

Answer 6

这对我来说非常有效。它需要标签并格式化值。

options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {

                    let label = data.labels[tooltipItem.index];
                    let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                    return ' ' + label + ': ' + value + ' %';

                }
            }
        }
    }

Answer 7

tooltips: {
    callbacks: {
        label: function (tooltipItem) {
            return (new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD',
            })).format(tooltipItem.value);
        }
    }
}

Answer 8

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