Chart.js悬停点图像

Question

我已将pointStyle设置为Chart.js折线图中的图像，但我希望隐藏该点，直到将其悬停为止。

这是我创建图像变量的地方：

var point = new Image();
point.src = 'path/to/image.png';

这是我的选项对象：

{
    type: 'line',
    data: {
        labels: ['13 Oct 2019', '14 Oct 2019', '15 Oct 2019', '16 Oct 2019'],
        datasets: [{
            label: 'paid',
            borderColor: '#ffffff',
            data: [5, 35, 15, 45],
            fill: false,
            pointStyle: point
        }]
    }
}

这显示图像为重点，但当然不仅限于悬停。我想完全隐藏该点，直到将其悬停为止，并且悬停时仅显示that点。

[不使用图像时，这些是我仅在悬停时用来显示点的选项：

{
    type: 'line',
    data: {
        labels: ['13 Oct 2019', '14 Oct 2019', '15 Oct 2019', '16 Oct 2019'],
        datasets: [{
            label: 'paid',
            borderColor: '#ffffff',
            data: [5, 35, 15, 45],
            fill: false,
            pointBackgroundColor: 'transparent',
            pointBorderColor: 'transparent',
            pointHoverBorderColor: '#ffffff',
        }]
    }
}

我还考虑过将1像素的透明图像显示为悬停点，但是我也不知道如何在悬停时更改图像。

Answer 1

您可以通过将数据集pointRadius属性设置为0并将pointHoverRadius属性设置为非0值来实现此目的（请参见下面的代码段）。>>

请注意，这使该点难以定位。我将设置以下属性来解决该问题：

options: {
  hover: {
    intersect: false
  },
  tooltips: {
    mode: "index"
  }
}
[非常有用的Chart.js sample page显示了各种可用的交互组合。

new Chart(document.getElementById("chart"), {
  type: "line",
  data: {
    labels: ['a', 'b', 'c'],
    datasets: [{
      data: [1, 2, 4],
      pointHoverRadius: 5,
      pointRadius: 0
    }]
  },
  options: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="chart"></canvas>