javascript - chart.js 中填充折线图中的悬停/单击区域

Question

给定 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但是在填充区域中，唯一的参数是一个空数组。

我有一个堆积的填充图表，如图所示，带有曲线。当鼠标位于浅灰色区域的任何位置时，我想要一个事件。



编辑 这是一个 fiddle :https://jsfiddle.net/markv/rvqjkrp9/1/

Answer 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>