问有没有一种方法可以用鼠标悬停在折线图上突出显示一条线？
EN

Stack Overflow用户

提问于 2021-07-13 04:29:49

回答 1查看 27关注 0票数 1

我将使用chart.js构建如下图：

如果能够允许用户将鼠标悬停在图形上的一条线上并以某种方式突出显示该线，这将是非常有用的。我该如何在chart.js中做到这一点？

谢谢!

chart.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-13 07:59:57

您可以在以下选项中使用onHover回调：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: '#FF0000',
        borderColor: '#FF0000'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        backgroundColor: '#0000FF',
        borderColor: '#0000FF'
      },
      {
        label: '# of Cars',
        data: [18, 4, 12, 6, 9, 2],
        backgroundColor: '#FF1493',
        borderColor: '#FF1493'
      }
    ]
  },
  options: {
    onHover: (e, activeEls, chart) => {
      if (activeEls.length === 0) {
        chart.data.datasets.forEach((dataset) => {
          dataset.backgroundColor = dataset.backgroundColor.length === 9 ? dataset.backgroundColor.slice(0, -2) : dataset.backgroundColor;
          dataset.borderColor = dataset.borderColor.length === 9 ? dataset.borderColor.slice(0, -2) : dataset.borderColor;
        });
        chart.update();
        return;
      }

      const hoveredEl = chart.getElementsAtEventForMode(e, 'point', {
        intersect: true
      }, true)[0]

      chart.data.datasets.forEach((dataset, i) => {
        dataset.backgroundColor = (hoveredEl.datasetIndex === i || dataset.backgroundColor.length === 9) ? dataset.backgroundColor : dataset.backgroundColor + '4D';
        dataset.borderColor = (hoveredEl.datasetIndex === i || dataset.borderColor.length === 9) ? dataset.borderColor : dataset.borderColor + '4D';
      });

      chart.update();
    },
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68353537

复制

相似问题

问有没有一种方法可以用鼠标悬停在折线图上突出显示一条线？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种方法可以用鼠标悬停在折线图上突出显示一条线？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种方法可以用鼠标悬停在折线图上突出显示一条线？
EN