Блог

Я обновляю веб-сайт, который 10 лет назад использовал highcharts, и конвертирую его в 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 извините)

Вы можете достичь желаемого, если отключите всплывающую подсказку по умолчанию и создадите пользовательскую.

Если у вас есть доступ к 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 /