Question

我有一个包含很多行的多系列折线图。我喜欢使用焦点API淡化其他数据点而不将其从图表中删除（它允许快速比较）。

现在，当用户将鼠标悬停在某个图例项目上时，该项目将突出显示，其余项目将淡化为灰色。这样做的问题是，我无法首先悬停某个项目，然后转到图表查看工具提示，因为很明显，不再有悬停。

所以我想做的就是点击一个图例项目＆＃34;修复＆＃34;或选择项目，淡化（不隐藏）其他项目。

这就是我现在所拥有的：

var chart_test = c3.generate({
    bindto: '#charttest',
    data: {
        type: 'spline',
            x: 'x',
            columns: [
              //DATA 
            ]
    },
    legend: {
             item: {
                 onclick: function (d) { 
                       chart_test.select(d);
                       chart_test.focus(d);
                 }
             }
    },
});

Answer 1

你几乎得到了它，只需启用选择并防止当你的鼠标不再悬停图例时调用defocus事件。

var chart = c3.generate({
    bindto: '#chartid'
    data:{
     ....
     selection: {
          enabled: true
     }
    },
    legend: {
           item: {
                onclick: function (d) { 
                       chart.focus(d);
                       chart.select(d);
                 },
                 onmouseout: function(d){
                       // prevent deselect onmouseout
                 }
           }
    }
});

当用户选择其他项目或想要取消选择当前选择时，唯一剩下的就是一些逻辑。

固定焦点在图例项目点击上

1 个答案: