如何在 chart.js 工具提示内容上隐藏标签数据？答案

【问题标题】：How can i hide label data on chart.js tooltip content?如何在 chart.js 工具提示内容上隐藏标签数据？
【发布时间】：2020-08-27 21:26:29
【问题描述】：

我正在使用 Metronic 主题，它正在使用 Chart.js。在工具提示上，我只需要显示没有标签的数据。但是当我不给标签参数图表工作错误时。

var config = {
type: 'line',
data: {
    labels: priceDate,
    datasets: [{
        label: "$",
        borderColor: color,
        borderWidth: border,

        pointHoverRadius: 4,
        pointHoverBorderWidth: 12,
        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
        fill: false,
        data: priceList,
    }]
},
options: {
    tooltips: {
        enabled: true,
    },
    responsive: true,
    maintainAspectRatio: true                
}

【问题讨论】：

标签： jquery laravel chart.js chart.js2 metronic

【解决方案1】：

你可以在tooltip中使用formatter函数，在函数内部，你可以访问this，你可以得到你想要的数据。

这是一个例子：

  tooltip: {
    formatter: function() {
      return `${this.y} ${this.series.name}`;
    }
  },

【讨论】：

【解决方案2】：

你试过标签：“priceDate”吗？

这可以工作（而不是破坏检索器）吗？

options: {tooltips: {enabled: true, dateTimeLabelFormats: {day: '% %, %'}},

【讨论】：

是的。示例 priceDate = [ 2020-08-26, 2020-08-26, 2020-08-26 ], priceList [10, 400, 60]

【解决方案3】：

使用tooltip.headerFormat 或tooltip.formatter 回调自定义工具提示输出。

API：https://api.highcharts.com/highcharts/tooltip.headerFormat

API：https://api.highcharts.com/highcharts/tooltip.formatter

【讨论】：

【解决方案4】：

最好使用tooltipformatter。在那里您可以格式化工具提示应如何显示数据。这是 jsfiddle 的 link，它只显示数据而不显示标签。

【讨论】：

【解决方案5】：

我解决了回调函数的问题。

tooltips: {
callbacks: {
 title: function() {}
},
enabled: true}

【讨论】：