跨多个高图更改系列 onclick 事件的颜色

Question

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

在各个图表上，我根据 clicking/hovering 更改颜色，并且可以根据单击第一个图例显示隐藏。我似乎无法让颜色起作用。我想将显示隐藏功能转换为颜色更改。

Fiddle: 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

希望我正确理解了你的问题:) 无论如何，您可以通过首先阻止要执行的默认操作（这显然是隐藏图表）来 "convert" 事件变为颜色变化。

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

你可以使用一个通用函数来处理颜色变化，它以系列为参数，找到它的 'sibling' 然后改变颜色：

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 事件的颜色

Change color of series onclick events across multiple highcharts

events

click

highcharts