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

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

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

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

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

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

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

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

data: kpiRex.getDataAtRow(3)

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

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

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

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

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

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

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