Как отобразить разные всплывающие подсказки на основе значений данных в ChartJS v2?

Question

Я использую ChartJ для отображения линейного графика и пытаюсь сделать 2 вещи:

Первый - отображать разные цвета в зависимости от значения подсказки. Наибольшее значение против Среднее значение

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

Я пытался использовать пользовательские плагины для этого, но это не сработало

Это код, который мне удалось сделать до сих пор:

Chart.plugins.register({
    beforeRender: function(chart) {
      if (chart.config.options.showAllTooltips) {
        chart.pluginTooltips = [];
        chart.config.data.datasets.forEach(function(dataset, i) {
          chart.getDatasetMeta(i).data.forEach(function(sector, j) {
            console.log(j, sector);
            chart.pluginTooltips.push(
              new Chart.Tooltip(
                {
                  _chart: chart.chart,
                  _chartInstance: chart,
                  _data: chart.data,
                  _options: chart.options.tooltips,
                  _active: [sector],
                },
                chart
              )
            );
          });
        });

        // turn off normal tooltips
        chart.options.tooltips.enabled = false;
      }
    },
    afterDraw: function(chart, easing) {
      if (chart.config.options.showAllTooltips) {
        if (!chart.allTooltipsOnce) {
          if (easing !== 1) return;
          chart.allTooltipsOnce = true;
        }

        // turn on tooltips
        chart.options.tooltips.enabled = true;
        Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
          tooltip.initialize();
          tooltip._options.bodyFontFamily = "Visby";

          // Change color based on value
          tooltip._options.bodyFontColor = '#FEB122';

          // Change tooltip's html if minimun value of dataset

          // Values .datapoints[0].value
          // console.log(tooltip._model);
          tooltip._options.displayColors = false;
          tooltip._options.bodyFontSize = tooltip._chart.height * 0.05;
          tooltip._options.yPadding = 0;
          tooltip._options.xPadding = 0;
          tooltip.update();
          tooltip.pivot();
          tooltip.transition(easing).draw();
        });
        chart.options.tooltips.enabled = false;
      }

    }
  });


  let canvas = document.getElementById("myLineChart");

  Chart.defaults.global.defaultFontFamily = "Visby";

  const ctx = canvas.getContext('2d');
  const labels = JSON.parse(ctx.canvas.dataset.dates);
  const prices = JSON.parse(ctx.canvas.dataset.prices);
  const myLineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
            label: "Prix du billet",
            data: prices,
            backgroundColor: [
              'rgba(0, 0, 0, 0)',
            ],
            borderColor: [
              '#F2F2F2',
            ],
            pointBackgroundColor:
              '#FEB122',
            pointBorderColor:
              '#FEB122',
            borderWidth: 3,
        }]
      },
      options: {
        showAllTooltips: true, // call plugin we created
        responsive: true,
        cutoutPercentage: 60,
        legend: {
          position: "bottom"
        },
        animation: {
          animateScale: true,
          animateRotate: true
        },
        tooltips: {
          enabled: false,
          backgroundColor:"rgba(0,0,0,0)",
          callbacks: {
            title: function(tooltipItems, data) {
              return "";
            },
            label: function(tooltipItem, data) {
              var datasetLabel = "";
              var label = data.labels[tooltipItem.index];
              return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '€';
            },
            labelColor: function(tooltipItem, data) {
              // console.log(data);
            }
          }
        },
        legend: {
          display: false
        },
        layout: {
         padding: {
            left: 32,
            right: 32,
            top: 32,
            bottom: 32
          }
         },
        scales: {
          xAxes: [{
            gridLines: {
              display: false,
              drawBorder: false,
            },
          }],
          yAxes: [{
            display: false
          }]
        }
      }
  });

Как я мог сделать эту работу?

Answer 1

Мне удалось сделать это с помощью плагина Chartjs Datalabels .

И используя параметры сценариев цвета .