javascript - 当 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

尝试将hover 的mode 和intersect 选项设置为与工具提示 使用的值相同。

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

这样，hover 事件就会像触发 tooltips 一样被触发。

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          
    }
  }
});

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