如何移除C3.js面积图中圆形元素的悬停事件

嘿，我来帮你搞定这个问题！要让C3.js面积图里的圆形数据点不再响应悬停事件，你可以根据需求选择下面几种方法：

方法1：完全禁用数据点的交互性 #

如果你的场景里不需要数据点有任何交互（包括悬停、点击），直接在图表配置里给point设置interactive: false即可，这样所有鼠标事件都会被禁用：

var chart = c3.generate({
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ],
    type: 'area'
  },
  point: {
    interactive: false // 禁用所有数据点的交互事件
  }
});

方法2：仅禁用悬停时的状态放大/高亮 #

如果你还需要保留数据点的其他交互（比如点击事件），只是不想看到悬停时的状态变化，可以关闭focus.expand的启用状态：

var chart = c3.generate({
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ],
    type: 'area'
  },
  point: {
    focus: {
      expand: {
        enabled: false // 关闭悬停时的点放大效果
      }
    }
  }
});

方法3：用CSS直接禁用鼠标事件 #

如果不想修改JS配置，也可以通过CSS给数据点元素设置pointer-events: none，彻底阻断鼠标事件触发：

.c3-circle {
  pointer-events: none;
}

这个方法会全局作用于所有C3图表的圆形数据点，适合快速解决问题。

试试上面的方法，应该就能消除你看到的悬停时圆形状态变化的问题啦！

内容的提问来源于stack exchange，提问作者Grzegorzg