代码之家 › 专栏 › 技术社区 › DanM

ChartJS:当鼠标悬停在图例上时,在堆叠条形图中突出显示数据集?

chart.js javascript

DanM · 技术社区 · 5 年前

左边的标签是用户,图例中的标签(对应于条形图中的类,即不同的数据集)是邮件列表。该图表基本上显示了有多少用户是特定邮件列表的成员;条形图的长度是给定用户所属的邮件列表数量。

我想做的是设置它,以便将鼠标悬停在图例中的某个条目上,将高亮显示(理想情况下使用边框或其他东西)条形图中与该数据集对应的部分。因此,如果我将鼠标悬停在第一个数据集条目上,所有这些条带左端的蓝色块(除“阴离子”外)都会突出显示。

使用 onHover 和 onLeave console.log '正在刷新当前悬停的数据集索引。但我不知道如何使属于该数据集的条形元素高亮显示。

0 回复 | 直到 5 年前

LeeLenalee 5 年前

在版本3的新升级版本中,您可以使用setActive元素实现这一点。

https://www.chartjs.org/docs/master/developers/api/#setactiveelementsactiveelements

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        hoverBackgroundColor: 'green',
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1,
        hoverBackgroundColor: 'red',
      }
    ]
  },
  options: {
    scales: {}
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
chart.setActiveElements([{
  datasetIndex: 0,
  index: 1,
}, {
  datasetIndex: 1,
  index: 1,
}]);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.10/chart.js" integrity="sha512-7igYTuENB1pHNsZ/SyzMYrcJAmRCk084yVOsxNNCQAdX1wSYvCeBOgSOMC6wUdKMO76kCJNOpW4jY3UW5CoBnA==" crossorigin="anonymous"></script>
</body>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前