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的{{1}}和intersect选项设置为与hover相同的值。

tooltips

通过这种方式，将触发... 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          
    }
  }
});

当Charts.js上的某些数据显示太尖时，增加点半径

1 个答案: