Question

我希望根据图例或实际列/线的点击更改多个图表中同一系列的列颜色和线条颜色。

在单独的图表上，我根据点击/悬停进行了颜色变换，我可以根据第一个图例的点击显示隐藏。我似乎无法让颜色发挥作用。我想将show hide功能转换为颜色变化。

小提琴：http://jsfiddle.net/jlm578/asdgqzgk/4/

这是我要转换或替换的代码块：

events: {
    legendItemClick: function (event) {
        var visibility = this.visible ? 'visible' : 'hidden';
        var series = $('#veiOverallAllLine').highcharts().series[this.index];
        if (this.visible) series.hide();
        else series.show();
        return true;
        //return false;
    }
}

Answer 1

我希望我理解你的问题:) 无论如何，您可以通过首先阻止执行默认操作（显然隐藏图表）将事件“转换”为颜色更改。

这可以很容易地使用事件本身内event.preventDefault()。

你可以使用一般函数来处理颜色变化，它将系列作为参数，找到它的“兄弟”而不是改变颜色：

function updateColor(series){
    if(series == undefined) return;
    var color = series.color == '#ffffff' ? '#851E20' : '#ffffff';
    var sibling = $('#veiOverallAllLine').highcharts().series[series.index];
    series.update({color:color});
    sibling.update({color:color});
}

（可以在这里做更多的概括，但由你决定......）

然而，整个plotOptions看起来应该或多或少：

            plotOptions: {

                series: {
                    allowPointSelect: true,
                    states: {
                        select: {
                            color: '#851E20'
                        }
                    },
                    events: {
                        click: function(){
                            updateColor(this);
                        },

                        legendItemClick: function (event) {
                            event.preventDefault();
                            updateColor(this);
                            return true;
                        }
                    }

                }
            },

在这里您可以看到一个示例：http://jsfiddle.net/a366e89c/2/ 注意！在示例中，只有上图表更改了两个图表的颜色，您只需将这些行复制到第二个图表中......

在多个高级图表中更改系列onclick事件的颜色

1 个答案: