如何在C3.js中无需点击触发指定图例的筛选高亮功能

嘿，这个需求我刚好实操过，其实不用模拟手动点击，C3.js本身就提供了原生API来实现自动高亮指定系列的效果，非常方便！

核心方法：chart.focus() #

C3的focus()方法就是专门用来高亮指定数据系列的，调用后目标系列会保持正常显示，其他系列会自动变暗（和手动点击图例的效果完全一致）。如果要取消高亮，调用chart.revert()即可。

具体实现步骤 #

1. 先初始化你的C3图表 #

先按照常规方式创建图表，确保图例是显示状态：

// 初始化C3图表实例
var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25],
            ['data3', 130, 100, 140, 200, 150, 50]
        ],
        type: 'line' // 这里可以换成你需要的图表类型，比如bar、area等
    },
    legend: {
        show: true // 必须确保图例开启，不过默认就是true
    }
});

2. 初始化完成后自动触发高亮 #

要确保图表渲染完成后再调用focus()，最可靠的方式是用onrendered回调（避免DOM未加载完成的问题）：

// 图表渲染完成后自动高亮data1系列
chart.onrendered = function() {
    chart.focus('data1');
};

3. 其他场景触发高亮 #

如果不是初始化时自动触发，而是在某个事件（比如按钮点击、数据更新后）触发，直接调用chart.focus('data1')就行：

// 比如点击按钮时触发高亮
document.getElementById('highlight-btn').addEventListener('click', function() {
    chart.focus('data1');
});

补充：如果需要隐藏其他系列而非变暗 #

如果你想要的是直接隐藏非目标系列（不是变暗），可以用hide()方法：

// 隐藏data2和data3，只显示data1
chart.hide(['data2', 'data3']);
// 恢复显示的话用chart.show(['data2', 'data3'])

亲测这个方法完全符合需求，你可以直接套用到你的项目里试试～

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