ChartJS 散点图多行工具提示，一框答案

【问题标题】：ChartJS scatterplot multi-line tooltip, one boxChartJS 散点图多行工具提示，一框
【发布时间】：2020-11-22 16:58:30
【问题描述】：

我正在尝试自定义 ChartJS 散点图工具提示中的文本。预期结果是以下各项的组合：

图片 1：

图像2：

我显然希望像图 1 中那样适当地显示数据，并且像图 2 中那样单独显示标题和数据，主体和页脚只有一个彩色方块。

我按照这里给出的答案Chartjs Tooltip Line Breaks。

经过验证的答案 (Alexey Pavlov) 生成图像 1，如下所示：

callbacks: {
   label: function(tooltipItem, data) {
       let tt = [`${data.labels[tooltipItem.index]}`];
       tt.push(`${xstat}: ${tooltipItem.xLabel}`);
       tt.push(`${ystat}: ${tooltipItem.yLabel}`);
       return tt;
   }
},

ghanshyam shah 的另一个答案更接近我想要实现的目标，生成的图像 2 使用页脚，但是似乎无法通过 tooltipItem.x/yLabel 访问数据点的 x 和 y 值在页脚回调中：

callbacks: {
    label: function(tooltipItem, data) {
        return data.labels[tooltipItem.index];
    },
    footer: function(tooltipItem, data) {
        let tt = [`${xstat}: ${tooltipItem.xLabel}`];
        tt.push(`${ystat}: ${tooltipItem.yLabel}`);
        return tt;
    }
},

TL;DR：如何在 ChartJS 工具提示页脚回调中访问数据点值？

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

您需要的是label 和afterLabel callback functions 的组合，如下所示：

callbacks: {
   label: (tooltipItem, data) => `${data.labels[tooltipItem.index]}`,
   afterLabel: (tooltipItem, data) => [`${xstat}: ${tooltipItem.xLabel}`, `${ystat}: ${tooltipItem.yLabel}`]
},

【讨论】：