时间戳

首页 > 解决方案 > chartjs tooltip html：使用数据填充工具提示

html - chartjs tooltip 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 , 0 , 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 , 0 , 582 , 1000 , 00'},
{x: 2,y:395.8,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 , 0 , 582 , 1000 , 00'}
}]

我想知道如何对 chart.js 做同样的事情。数据正在从 PHP 数据库中输入。所以我可以从额外的字段中更改它，但是我应该把它放在哪里呢？

提前致谢。（chart.js 的新手，抱歉）

标签： htmlchart.jstooltip

解决方案

如果您禁用默认工具提示并创建自定义工具提示，您可以实现您想要的。

如果您有权访问 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/

推荐阅读