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

Question

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

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

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

对不起，我想post一张图，可是我的口碑太垃圾了！

我从数据库中抓取数据，然后设置到我的 table:

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

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

data: kpiRex.getDataAtRow(3)

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

Answer 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 中提到了此选项。一定要看看，值得检查所有其他可以在其中自定义的选项。

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

Answer 2

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

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

给定 'v' 的论点除了 'value' 属性之外还包含很多信息。您可以在该函数中放置一个 'debugger' 并自行检查。

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

Answer 4

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

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

即，您可以 return 修改 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 5

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

Answer 6

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

Answer 7

在Chart.Js 2.8.0中，自定义工具提示的配置可以在这里找到：https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback (Thanks to @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;
      }
    }
  }
}

这里也有一个例子 fiddle：https://jsfiddle.net/y3petw58/1/

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

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

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

在我的例子中，我必须对每个数据集执行一些计算并且必须确定正确的线，every-time我将鼠标悬停在图表中的一条线上。

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

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

当您必须在 line-chart 中绘制不同的线并根据图表中属于不同线的其他点的数据操作线的悬停点的工具提示时，上述场景会派上用场在同一指数。

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

                }
            }
        }
    }

Answer 10

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

Answer 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 美元）

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

JavaScript Chart.js - Custom data formatting to display on tooltip

javascript

code-formatting

string-formatting

number-formatting

chart.js