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;
            }
        }
    }
}

即，您可以返回对保存 y 轴值的 tooltipItem.yLabel 的修改。就我而言，我想为金融图表添加美元符号、舍入和千位逗号，因此我使用了:

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;
                });
            }
        }
    }
}