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

【问题标题】：JavaScript Chart.js - Custom data formatting to display on tooltipJavaScript Chart.js - 在工具提示上显示的自定义数据格式
【发布时间】：2015-04-18 13:52:30
【问题描述】：

我在这里查看了各种文档和类似问题，但似乎找不到特定的解决方案。如果我遗漏了任何明显的内容或重复了这个问题，我们深表歉意！

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

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

对不起，我想发图片，但我的名声太垃圾了！

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

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

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

data: kpiRex.getDataAtRow(3)

任何帮助都会很棒！我已经坚持了几个小时，这可能是我忽略的非常简单的事情。

【问题讨论】：

标签： javascript string-formatting number-formatting code-formatting chart.js

【解决方案1】：

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

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

这样，如果你想要的话，你可以在你的值之后添加一个“%”符号。

这里是a jsfiddle to illustrate this。

请注意，tooltipTemplate 适用于您只有一个数据集，multiTooltipTemplate 适用于您有多个数据集。

global chart configuration section of the documentation 中提到了此选项。看看，值得检查所有其他可以定制的选项。

请注意，您的数据集应仅包含数值。（那里没有 % 符号或其他东西）。

【讨论】：

【解决方案2】：

您可以给 tooltipTemplate 一个函数，并根据需要格式化工具提示：

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

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

【讨论】：

“someOtherFunction()”应该返回什么？像“”这样的字符串模板、字符串还是其他？或者更准确地说，它应该做什么？返回某些东西或修改所提供参数的属性？
@SomethingOn someOtherFunction() 应该返回要在工具提示中显示的字符串。不是模板，只是字符串。只要您返回一个字符串，您就可以随意操作 v.value 。它不应该修改v，这看起来很危险。

【解决方案3】：

在chart.js 2.1.6 中，我做了这样的事情（在打字稿中）：

  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】：

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

【讨论】：

这很好，但它删除了系列的标签
我使用回调来生成我的工具提示，如下所示。回调：{ label: function(tooltipItem, data) { return tooltipItem.yLabel + '%'; } 但它也显示 x 轴值.. 我想从我的工具提示中隐藏 x 轴值
@Kyrth 。是的，它仍然显示 x 轴值。如何只显示 yAxis 值。？
@RafaelTSCS 您可以将退货换成return data.datasets[tooltipItem.datasetIndex].label + " $" 以保留标签
文档链接：chartjs.org/docs/latest/configuration/…

【解决方案5】：

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

【讨论】：

你应该添加正确的代码sn-p，首先你应该指出OP脚本中的错误或问题，而不是仅仅添加代码并发布答案，你应该更具描述性

【解决方案6】：

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

【讨论】：

这个答案涵盖了更多用例。仅当yLabel 具有可用值时，所选选项才是正确的，但有时它可能只是一个空字符串。

【解决方案7】：

在 Chart.Js 2.8.0 中，自定义工具提示的配置可以在这里找到：https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback（感谢@prokaktus）

如果你想，例如显示一些带有前缀或后缀的值（在示例中，脚本将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;
      }
    }
  }
}

这里也有一个示例小提琴：https://jsfiddle.net/y3petw58/1/

【讨论】：

【解决方案8】：

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

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

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

让我们从记录标签回调函数的参数开始，你会看到类似于这里数据集的结构，数组由你想在图表中绘制的不同线条组成。在我的例子中是 4，这就是为什么 datasets 数组的长度是 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;
    }
  }

当您必须在折线图中绘制不同的线并根据图表中同一索引中属于不同线的其他点的数据来操作线的悬停点的工具提示时，上述方案将派上用场.

【讨论】：

【解决方案9】：

这对我来说很好用。它需要标签并格式化值。

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

                }
            }
        }
    }

【讨论】：

【解决方案10】：

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

【讨论】：

虽然此代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的答案以添加解释并说明适用的限制和假设。 From Review
很好的答案，很干净！

【解决方案11】：

这是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 美元）

【讨论】：