高图轴悬停

Question

我正在做的是，改变条形图的颜色，当悬停y轴。在图表中，我有两个线形图和一个条形图，并且有三个y轴。

y axis[0] -- bar chart y axis[1] -- line chart 1 y axis[2] -- line chart 2

当我悬停y轴[0]时，我想分别改变柱状图的颜色。

What I tried

对于这个过程，我不知道如何获得我悬停的轴。因此，我无法继续前进。

小提琴小提琴

Thanks in Advance

Answer 1

您可以使用customEvents插件将事件附加到标签上。然后，您可以更新每个列的填充，参见演示中的第一个:http://jsfiddle.net/6pLkv/5/

当您使用axis.series时，那么在串联数组中，您只有yl串联连接到该轴。你不必担心索引等

            labels: {
                formatter: function() {
                    return this.value +' mm';
                },
                style: {
                    color: '#4572A7'
                },
                events: {
                    mouseover: function () {
                        this.axis.series[0].data[0].graphic.attr({
                            fill: 'red' 
                        });
                    },
                    mouseout: function() {
                        this.axis.series[0].data[0].graphic.attr({
                            fill: 'blue' 
                        });
                    }
                }
            },

Answer 2

看了这个，似乎没有简单的方法!

但是你可以针对一个特定的系列，像这样:

axisCount = 3;
seriesIWant = 1;
$(document).on('mouseover', '.highcharts-axis:eq(' + (axisCount - 1) + '), .highcharts-axis-labels:eq(' + (axisCount - 1) + ') ', function () {
    console.log('mouseover');
    $('.highcharts-series:nth-child(' + seriesIWant + ') rect').each(
    function (i, element) {
        $(element).css('fill', '#000');
    });
});
$(document).on('mouseout', '.highcharts-axis:eq(' + (axisCount - 1) + '), .highcharts-axis-labels:eq(' + (axisCount - 1) + ')', function () {
    $('.highcharts-series:nth-child(' + seriesIWant + ') rect').each(
    function (i, element) {
        $(element).css('fill', '#4572A7');
    });
});

axisCount是基于1的，这里反映了你在JS中添加的轴的顺序(1 = x轴，2 = y轴-1(温度)和3 = y轴-2(降雨))。seriesIWant是1-根据在JS中添加的系列的顺序，这指定了该系列的"图表"。所以这里1是条形图。看起来还行。演示:http://jsfiddle.net/robschmuecker/6pLkv/4/