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

我在这里查看了各种文档和类似的问题，但似乎找不到具体的解决方案。如果我遗漏了任何明显的内容或重复了此问题，请道歉

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

我的问题是我需要将工具提示中的数据显示为格式化数据。与%的数字相同。例如，我的数据库中的一个数据是-0.17222。我已经将它格式化为一个百分比，显示在我的表格中，一切都很好。但是，在为chart.js条形图设置数据时，数据显然缺少这种格式，并显示为-0.17222，这是我不希望看到的

对不起，我想贴张照片，但是我的名声太差了

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

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

然后我在图表部分中这样输入这些数据：

data: kpiRex.getDataAtRow(3)

---

任何帮助都会很好！我已经在这上面呆了几个小时了，我可能忽略了一些非常简单的东西。

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

//字符串-单个工具提示的模板字符串
ToolTiptTemplate:“：”，
//字符串-多个工具提示的模板字符串
多工具模板：“，

这样，如果需要，可以在值后面添加“%”符号

给你

请注意，如果只有一个数据集，ToolTiptTemplate适用，如果有多个数据集，MultiToolTiptTemplate适用

此选项在中提到。一定要看一看，它值得检查所有其他选项，可以在那里定制

---

请注意，数据集应仅包含数值。（此处没有%符号或其他内容）。

您可以为tooltipTemplate提供一个函数，并根据需要设置工具提示的格式：

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

---

那些给定的“v”参数除了“value”属性外还包含很多信息。您可以在该函数中放置一个“调试器”，并自己检查这些调试器。

在chart.js 2.1.6中，我做了如下操作（在typescript中）：

---

对于chart.js 2.0+，这已更改（不再使用ToolTiptTemplate/MultiToolTiptTemplate）。对于那些只想访问当前未格式化值并开始调整它的用户，默认工具提示与以下相同：

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

也就是说，您可以将修改返回到保存y轴值的

工具提示项.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;
                });
            }
        }
    }
}

---

在Chart.Js 2.8.0中，可以在这里找到自定义工具提示的配置：（感谢）

例如，如果您想显示带有前缀或后缀的某些值（在本例中，脚本将

kWh

的单位添加到图表中的值），您可以这样做：

options: {
  rotation: 1 * Math.PI,
  circumference: 1 * Math.PI,
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        console.log(data);
        console.log(tooltipItem);

        var label = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] || '';

        if (label) {
          label += ' kWh';
        }

        return label;
      }
    }
  }
}

---

这里也有一个fiddle示例：

您需要使用标签回调。 以下示例是数据值四舍五入的常见示例，将数据四舍五入到小数点后两位

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
        }
    }
});

现在让我编写一个使用标签回调功能的场景

让我们从记录Label Callback函数的参数开始，您将看到类似于此的结构数据集，数组由要在图表中绘制的不同线条组成。 在我的例子中是4，这就是为什么数据集数组的长度是4

在我的例子中，每次我在图表中的一条线上悬停时，我必须对每个数据集执行一些计算，并且必须识别正确的线

为了区分不同的行并根据其他行的数据操作悬停工具提示的数据，我必须编写以下逻辑

  callbacks: {
    label: function (tooltipItem, data) {
      console.log('data', data);
      console.log('tooltipItem', tooltipItem);
      let updatedToolTip: number;
      if (tooltipItem.datasetIndex == 0) {
        updatedToolTip = tooltipItem.yLabel;
      }
      if (tooltipItem.datasetIndex == 1) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[0].data[tooltipItem.index];
      }
      if (tooltipItem.datasetIndex == 2) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[1].data[tooltipItem.index];
      }
      if (tooltipItem.datasetIndex == 3) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[2].data[tooltipItem.index]
      }
      return updatedToolTip;
    }
  } 

---

当您必须在折线图中绘制不同的直线，并根据同一索引下属于图表中不同直线的其他点的数据操作直线悬停点的工具提示时，上述场景将非常方便。

这对我来说非常好。它接受标签并格式化值

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 + ' %';

                }
            }
        }
    }

---

这是chart.js 2.8.0版的最后选项部分

        options: {
        legend: {
            display: false //Have this or else legend will display as undefined
        },
        scales: {
            //This will show money for y-axis labels with format of $xx.xx
            yAxes: [{
              ticks: {
                beginAtZero: true,
                callback: function(value) {
                    return (new Intl.NumberFormat('en-US', {
                        style: 'currency',
                        currency: 'USD',
                    })).format(value);
                }
              }
            }]
        },
        //This will show money in tooltip with format of $xx.xx
        tooltips: {
            callbacks: {
                label: function (tooltipItem) {
                    return (new Intl.NumberFormat('en-US', {
                        style: 'currency',
                        currency: 'USD',
                    })).format(tooltipItem.value);
                }
            }
        }
    }

---

我想为y轴和鼠标悬停时显示的工具提示值显示货币值。这可以显示$49.99和零美分的值（例如：$50.00）

someOtherFunction（）应该返回什么？像“”这样的字符串模板、字符串还是其他？或者更准确地说，它应该做什么？返回某些内容或修改所提供参数的属性？@SomethingOn someOtherFunction（）应返回要在工具提示中显示的字符串。不是模板，只是字符串。只要返回字符串，就可以根据需要操纵v.value。它不应该修改v，这似乎很危险。这很好，但它删除了系列标签。我使用回调来生成我的工具提示，如下所示。。回调：{label:function（tooltipItem，data）{return tooltipItem.yLabel+'%'；}但它也显示x轴值..我想从我的tooltip@Kyrth。是的，它仍然显示x轴值。。如何仅显示yAxis值。？@RafaelTSCS您可以将返回值替换为

返回数据。数据集[tooltipItem.datasetIndex]。标签+“$”

要保留labelDocumentation链接：您应该添加适当的代码片段，首先您应该指出OP脚本中的错误或问题，而不仅仅是添加代码并发布答案，您应该更详细地描述此答案涵盖更多的用例。仅当

yLabel

具有us时，所选选项才是正确的虽然这段代码可以解决这个问题，但它如何以及为什么解决这个问题将真正有助于提高您的帖子质量，并可能导致更多的投票。请记住，您回答的是

  callbacks: {
    label: function (tooltipItem, data) {
      console.log('data', data);
      console.log('tooltipItem', tooltipItem);
      let updatedToolTip: number;
      if (tooltipItem.datasetIndex == 0) {
        updatedToolTip = tooltipItem.yLabel;
      }
      if (tooltipItem.datasetIndex == 1) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[0].data[tooltipItem.index];
      }
      if (tooltipItem.datasetIndex == 2) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[1].data[tooltipItem.index];
      }
      if (tooltipItem.datasetIndex == 3) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[2].data[tooltipItem.index]
      }
      return updatedToolTip;
    }
  } 

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 + ' %';

                }
            }
        }
    }

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

        options: {
        legend: {
            display: false //Have this or else legend will display as undefined
        },
        scales: {
            //This will show money for y-axis labels with format of $xx.xx
            yAxes: [{
              ticks: {
                beginAtZero: true,
                callback: function(value) {
                    return (new Intl.NumberFormat('en-US', {
                        style: 'currency',
                        currency: 'USD',
                    })).format(value);
                }
              }
            }]
        },
        //This will show money in tooltip with format of $xx.xx
        tooltips: {
            callbacks: {
                label: function (tooltipItem) {
                    return (new Intl.NumberFormat('en-US', {
                        style: 'currency',
                        currency: 'USD',
                    })).format(tooltipItem.value);
                }
            }
        }
    }