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）。对于那些只想访问当前未格式化值并开始调整它的人，默认工具提示与以下内容相同：

iex(1)> defmodule Crap do
...(1)>   use GenServer
...(1)>
...(1)>   def handle_info(:kill_me_pls, state) do
...(1)>     {:stop, :normal, state}
...(1)>   end
...(1)>
...(1)>   def terminate(_, state) do
...(1)>     IO.inspect "Look! I'm dead."
...(1)>   end
...(1)> end
iex(2)> {:ok, pid} = GenServer.start Crap, []
{:ok, #PID<0.98.0>}
iex(3)> send(pid, :kill_me_pls)
"Look! I'm dead."
:kill_me_pls
iex(4)> Process.alive?(pid)
false

即，您可以将修改返回到options: { tooltips: { callbacks: { label: function(tooltipItem, data) { return tooltipItem.yLabel; } } } }，其中包含y轴值。就我而言，我想为金融图表添加一个美元符号，四舍五入和数千个逗号，所以我使用了：

tooltipItem.yLabel

Answer 2

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

 // 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 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

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

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

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

Answer 5

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

Answer 6

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

Answer 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/

Answer 8

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

Answer 9

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

Answer 10

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

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，这就是为什么数据集数组的长度是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;
    }
  }

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

Answer 11

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

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

                }
            }
        }
    }

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

11 个答案: