Блог

Учитывая линейную диаграмму в chart.js с заполненными областями под кривой. Есть ли способ получить полезное событие, когда пользователь наводит курсор мыши на заполненную область или щелкает по ней?

 var chart_canvas = document.getElementById("myChart");
var stackedLine = new Chart(chart_canvas, {
    type: 'line',
    data: {
        labels: ["0.0", "0.2", "0.4", "0.6", "0.8", "1.0"],
        fill: true,
        datasets: [{
            label: 'Usage',
            data: data[0],
        },
        {
            label: 'Popularity',
            data: data[1],
        }]
    },
    options: {
        onHover: function (elements) {
            console.log(elements);
        }
        // more stuff
    }
});
 

Я пытался onHover , но когда в заполненной области единственным аргументом является пустой массив.

У меня есть сложенная, заполненная диаграмма, как на изображении, с изогнутыми линиями. Я хотел бы событие, когда мышь находится в любом месте светло-серой области.

РЕДАКТИРОВАТЬ Вот скрипка: https://jsfiddle.net/markv/rvqjkrp9/1 /

Вы можете вычислить, находится ли мышь в области, получив значение оси y, индекс оси x, а затем вычислить максимальное заполнение, а затем проверить, ниже ли значение yVal:

 var chart_canvas = document.getElementById("myChart");
var stackedLine = new Chart(chart_canvas, {
  type: 'line',
  data: {
    labels: ["0.0", "0.2", "0.4", "0.6", "0.8", "1.0"],
    fill: true,
    datasets: [{
      label: 'Usage',
      pointRadius: 3,
      data: [.5, .3, .2, .1, .4, .3],
      borderWidth: 1,
      fill: true
    }, {
      label: 'Popularity',
      pointRadius: 3,
      data: [.0, .1, .2, .4, .1, .4],
      borderWidth: 1,
      fill: true
    }]
  },
  options: {
    scales: {
      y: {
        stacked: true,
      }
    },
    onHover: (evt, activeEls, chart) => {
      let yVal = chart.scales.y.getValueForPixel(evt.y);
      let index = chart.scales.x.getValueForPixel(evt.x);

      let maxFilledArea = chart.data.datasets.reduce((acc, curr) => (acc   curr.data[index]), 0)

      if (yVal <= maxFilledArea) {
        console.log('Mouse in filled area')
      }
    }
  }
}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>

<main>
  <canvas id="myChart" width="500" height="500"></canvas>
</main>