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

【问题标题】：Hover/click area in filled line chart in chart.jschart.js 中填充折线图中的悬停/单击区域
【发布时间】：2017-02-24 16:10:14
【问题描述】：

给定 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/

【问题讨论】：

标签： javascript charts chart.js dom-events mouseover

【解决方案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>

【讨论】：