如何在工具提示 Chart JS 中显示 xAxes 和 yAxes 数据？答案

【问题标题】：How can I display the xAxes and yAxes data in the tooltip, Chart JS?如何在工具提示 Chart JS 中显示 xAxes 和 yAxes 数据？
【发布时间】：2021-12-30 21:59:57
【问题描述】：

我正在尝试实现下面第一张图片中显示的工具提示。在工具提示内部，我需要显示 yAxes 和 xAxes 数据。我使用的chart.js版本是3.7.0

我的工具提示如下所示：

我正在尝试复制的工具提示：

chart.js 文档对我来说很难理解。有没有高手可以给我解释一下。

问题：为什么我的工具提示返回 yAxes 数据，而我作为未定义的变量 (label) 返回？

我可以使用其他选项来使我的图表看起来像第二张图片中的图表吗？

我的代码：

 tooltip: {
   displayColors: false,
   backgroundColor: 'rgba(45,132,180,0.8)',
   bodyFontColor: 'rgb(255,255,255)',
   callbacks: {
     title: function(item, everything){
       return;
     },
     label: function(item, everything){
       //console.log(item);
       //console.log(everything);

       let first = item.yLabel;
       let second = item.xLabel;

       let label = first + ' ppm';
       return label;
     }
   }
 }

提前感谢您的时间和努力，请帮我弄清楚我做错了什么！

【问题讨论】：

我认为您的操作没有问题。我将您的回调函数插入到我制作的图表中，工具提示显示了预期值，例如1.225 ppm。也许您可以编辑您的问题并显示更多代码，包括整个 Chart 构造函数调用、填充数据集的任何代码等。
@Marion 那是因为您使用的是 chart.js 的 V2，它已过时且不再受支持，如果您尝试在最新版本中执行它，它将无法正常工作

标签： javascript chart.js

【解决方案1】：

yLabel 和 xLabel 在工具提示中不再存在，它们是 V2 语法。您可以在解析部分中对 y 对象进行轴化以获取 y 值。然后您可以使用afterBody 回调来显示 x 标签，如下所示：

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'pink'
    }]
  },
  options: {
    plugins: {
      tooltip: {
        displayColors: false,
        backgroundColor: 'rgba(45,132,180,0.8)',
        bodyFontColor: 'rgb(255,255,255)',
        callbacks: {
          title: () => {
            return
          },
          label: (ttItem) => (`${ttItem.parsed.y} ppm`),
          afterBody: (ttItems) => (ttItems[0].label)
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

【讨论】：

你好@LeeLenalee，感谢你的努力，你的代码就像一个魅力。
问题是：有没有办法或者我怎样才能在 afterbody 中显示一组不同的标签？其次：在我附上的第二张图片中，工具提示有不同的风格。我阅读了有关 custom 或 external 工具提示的文档，但是尝试理解有关 external 工具提示的 chart.js 3.7.0 文档完全令人沮丧。你能不能帮我设计一下我的tooltip，让它看起来像第二张照片中的那样？再次提前致谢。
这里有 2 个小提琴向您展示如何实现基本的外部工具提示：jsfiddle.net/Leelenaleee/xhrs2wvc/19 jsfiddle.net/Leelenaleee/qb17Lx4j/7
我可以在tooltip 的xAxes 中使用不同的label 变量，但保留yAxes 和我想在xAxes 上添加的新标签和不同标签之间连接索引的部分吗？跨度>
您能否通过此电子邮件与我联系：jameulukasli1@gmail.com。这个项目是给我的大学的，它是星期一，如果你能联系我并帮助我完成它。那太好了。（图表还有一些小问题，我想不通，请帮忙！）。