在 Charts.js 上为某些数据显示提示时增加点半径

Question

我正在使用Chart.js。我想让该点默认隐藏，但是当为某些数据显示工具提示时，通过增加其点的半径来突出显示数据。

以下代码是我尝试过的。但如果鼠标悬停在它上面，它只会增加点的半径。只要显示工具提示，我就希望半径增加。

感谢您的帮助。

var myChart = new Chart('chart', {
  type: 'line',
  data: {
    datasets: [
      {
        label: "l1",
        borderColor: `hsla(150, 60%, 33%, 1)`,
        backgroundColor: `hsla(150, 60%, 33%, 0.8)`,
        fill: false,
        data: [{ x: 1, y: 2 }, { x: 2, y: 3 }],
      },{
        label: "l2",
        borderColor: `hsla(210, 60%, 33%, 1)`,
        backgroundColor: `hsla(210, 60%, 33%, 0.8)`,
        fill: false,
        data: [{ x: 1, y: 2 }, { x: 2, y: 1 }],
      }
    ]
  },
  options: {
    elements: {
      point: {
        radius: 1,
        hoverRadius: 4,
      },
    },
    tooltips: {
      mode: 'index',
      intersect: false,
      position: 'nearest',
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart" />

Answer 1

尝试使用用于 的相同值设置mode和intersect选项。 hovertooltips

...
hover: {
  mode: 'index',
  intersect: false
}
...

这样，hover事件将以与触发相同的方式tooltips触发。

...
hover: {
  mode: 'index',
  intersect: false
}
...

var myChart = new Chart('chart', {
  type: 'line',
  data: {
    datasets: [
      {
        label: "l1",
        borderColor: `hsla(150, 60%, 33%, 1)`,
        backgroundColor: `hsla(150, 60%, 33%, 0.8)`,
        fill: false,
        data: [{ x: 1, y: 2 }, { x: 2, y: 3 }],
      },{
        label: "l2",
        borderColor: `hsla(210, 60%, 33%, 1)`,
        backgroundColor: `hsla(210, 60%, 33%, 0.8)`,
        fill: false,
        data: [{ x: 1, y: 2 }, { x: 2, y: 1 }],
      }
    ]
  },
  options: {
    elements: {
      point: {
        radius: 1,
        hoverRadius: 4,
      },
    },
    tooltips: {
      mode: 'index',
      intersect: false,
      position: 'nearest',
    },
    hover: {
      mode: 'index',
      intersect: false          
    }
  }
});