Chart.js V2：向工具提示标签添加前缀或后缀

Question

在 Chart.js V1.0 中，我会添加

tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= '€' + value %>"

以添加欧元符号作为工具提示标签的前缀。然而，这在 V2 中不再有效。有人知道实现这一目标的新方法吗？好像没找到。

非常感谢！

Answer 1

在 V2.0 中，不推荐使用 tooltipTemplate 选项。相反，您可以使用回调来修改显示的工具提示。 这里有一个使用回调的示例，您可以在Chart.defaults.global.tooltips下的文档

中找到可能的回调

对于你的情况，我会执行以下操作：

window.myLine = new Chart(chart, {
    type: 'line',
    data: lineChartData,
    options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + ' €';
                    }
                }
            },
     }       
  });

不要忘记设置 HTML 元标记：

<meta charset="UTF-8">

Answer 2

除了 iecs 的答案之外，如果您想返回精确的默认文本并添加更多内容（例如您的情况下的 € 符号），请使用以下语法：

var ctx = $(chartCanvas);
window.chartObject = new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: {            
        tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                    return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.yLabel + ' €';
                }
            }

        }
    }
});

Answer 3

看看是否有帮助：

        var config = {
            options: {
                tooltips: {
                    callbacks: {
                        title: function (tooltipItem, data) { return data.labels[tooltipItem[0].index]; },
                        label: function (tooltipItem, data) {
                            var amount = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            var total = eval(data.datasets[tooltipItem.datasetIndex].data.join("+"));
                            return amount + ' / ' + total + ' ( ' + parseFloat(amount * 100 / total).toFixed(2) + '% )';
                        },
                        //footer: function(tooltipItem, data) { return 'Total: 100 planos.'; }
                    }
                },
            }
        };

Answer 4

这套“标签+价值+€”

options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return data.labels[tooltipItem.index] + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '€';
            }
        }
    }
}

Answer 5

如果您有一个堆叠条形图图表（我假设是堆叠折线图）并且您想要使用货币符号格式化单个条形图中包含的所有数据点，您可以执行以下操作：

    tooltips: {
        mode: 'label',
        callbacks: {
            label: function (tooltipItems, data) {
                return '$' + tooltipItems.yLabel;
            }
        }
    },

记下

mode

的值。

如果您想更好地控制工具提示，例如包含出现在图表图例中的标签，您可以执行以下操作：

    tooltips: {
        mode: 'single',  // this is the Chart.js default, no need to set
        callbacks: {
            label: function (tooltipItems, data) {
                var i, label = [], l = data.datasets.length;
                for (i = 0; i < l; i += 1) {
                    label[i] = data.datasets[i].label + ' : ' + '$' + data.datasets[i].data[tooltipItems.index];
                }
                return label;
            }
        }
    },

Answer 6

刚刚更新@Luc Lérot 的答案。 我遇到了同样的问题，他的代码帮助了我，但没有解决它，我必须修改它才能为我工作。 使用 Chart.js 版本 2.6.0

var ctx = $(chartCanvas);
window.chartObject = new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: {            
        tooltips: {
               callbacks: {
                   label: function (tooltipItems, data) {
                       return data.datasets[tooltipItems.datasetIndex].label + ': ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] + ' €';
                   }
              }

        }
    }
});

Answer 7

随着我们继续沿着发布链前进，Chart.js v3.X 中的答案再次随着更新的选项 API 发生变化。

添加温度单位示例如下：

const options = {
    plugins: {
        tooltip: {
            callbacks: {
                label: (item) =>
                    `${item.dataset.label}: ${item.formattedValue} °C`,
            },
        },
    },
}

Answer 8

为了概括代码，我们对数据集使用

unitPrefix

和

unitSuffix

，例如：

datasets: [
    {
        label: 'Loss Rate',
        data: [],
        unitSuffix: "%",
    },
    {
        label: 'Price',
        data: [],
        unitPrefix: "$",
    },

然后我们就可以得到这个代码：

options: {
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                let dataset = data.datasets[tooltipItem.datasetIndex];
                let blocks = [];
                if (dataset.label) {
                    blocks.push(${dataset.label} + ':');
                }
                if (dataset.unitPrefix) {
                    blocks.push(dataset.unitPrefix);
                }
                blocks.push(dataset.data[tooltipItem.index])
                if (dataset.unitSuffix) {
                    blocks.push(dataset.unitSuffix);
                }
                return blocks.join(' ');
            },
        },
    },
},

Answer 9

Chart.js 版本 3.9.1

const options: ChartOptions = {
  plugins: {
    tooltip: {
      callbacks: {
        label: ({ label, formattedValue }) => `${label}:${formattedValue}g`
      }
    }
  }
}

Answer 10

参见工具提示部分：

const options = {
      interaction: {
        mode: "nearest",
        intersect: false,
      },
      scales: {
        y: {
          grid: {
            display: false,
          },
          position: "right",
        },
        x: {
          ticks: {
            maxRotation: 0,
            minRotation: 0,
          },
        },
      },
      plugins: {
        legend: {
          display: false,
        },
        tooltip: {
          callbacks: {
            title: function (context) {
              return data[context[0].dataIndex].date //in title you have to call context[0] in order to get current item
            },
            label: function (context) {
              return context.raw //raw will give you the label value
            },

            intersect: false,
            backgroundColor: "#51d198",
          },
        },
      },
    }