有没有办法在鼠标悬停时更改c3js堆积区域图表的不透明度

Posted 2021-03-30

我有一个关于c3.js的问题。目前，我们使用c3js来显示堆积区域图表，这很好，但我们的客户询问我们当客户鼠标悬停在一个区域时我们是否可以更改单个区域的不透明度。我找不到任何解决方案，希望听到你的建议。谢谢

答案

在设置图表后尝试添加它 - >

d3.selectAll(".c3-area")
    .style ("pointer-events", "all")
    .on("mouseover", function (d) { return d3.select(this).style("opacity", 0.6)})
    .on("mouseout", function (d) { return d3.select(this).style("opacity", 0.2)})
;

指针事件设置是重要的位，因为默认情况下，c3图表中的大多数元素都被设置为忽略它们。

将它添加到c3示例的末尾以查看它是否正常工作 - > https://c3js.org/samples/chart_area.html