chartjs工具提示html：使用数据填充工具提示

如何解决chartjs工具提示html：使用数据填充工具提示

我正在更新一个使用highcharts的10年网站，并将其转换为chartjs。

在数据中，工具提示有一个额外的字段，即html字符串。

示例：

data: [
{x: 0,y:395.8,extra: 'Aug 11 2020 00:56:48<br/>12% <br>395.8  <br/>53.9 <br/>56.1 Inches,95 \u00B0F<br/>4.674,582,1000,00'},{x: 1,y:390.2,extra: 'Aug 11 2020 01:56:48<br/>12% <br>390.2  <br/>53.1 <br/>56.2 Inches,93.2 \u00B0F<br/>4.681,{x: 2,extra: 'Aug 11 2020 02:56:49<br/>12% <br>395.8  <br/>53.9 <br/>56.1 Inches,93.2 \u00B0F<br/>4.676,00'}
}]

我想知道如何使用chart.js进行相同操作。 数据是从PHP数据库中放入的。 所以我可以从多余的字段中更改它，但是我应该放在哪里？

先谢谢了。 （chart.js的新功能很抱歉）

解决方法

如果禁用默认工具提示并创建自定义工具提示，则可以实现所需的功能。

如果您有权使用php API，我将亲自更改数据，以便日期位于x轴上，而不仅仅是数字。

var customTooltip = function(tooltip) {
  $(this._chart.canvas).css('cursor','pointer');

  var positionY = this._chart.canvas.offsetTop;
  var positionX = this._chart.canvas.offsetLeft;

  $('.chart-tooltip').css({
    opacity: 0
  });

  if (!tooltip || !tooltip.opacity) {
    return;
  }

  if (tooltip.dataPoints.length > 0) {
    tooltip.dataPoints.forEach(function(dataPoint) {
      var content = extra[dataPoint.index];

      $('#tooltip').html(content);
      $('#tooltip').css({
        opacity: 1,top: positionY + dataPoint.y + 'px',left: positionX + dataPoint.x + 'px',});
    });
  }
};

我创建了一个小提琴来演示如何使用您的数据：https://jsfiddle.net/y01ewbtz/