Question

我正在处理它，当悬停y轴时改变条形图的颜色。在图表中，我有两行和一个条形图，并有三个y轴。

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

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

我尝试了什么

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

小提琴 fiddle

先谢谢

Answer 1

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

但是你可以像这样定位一个特定的系列：

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是基于JS中添加的系列的顺序，它指定了该系列的“图表”。所以这里1就是你的条形图。它似乎工作正常。演示：http://jsfiddle.net/robschmuecker/6pLkv/4/

Answer 2

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

当您使用axis.series时，在系列数组中，您将onyl系列连接到该轴。您不必担心索引等。

            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' 
                        });
                    }
                }
            },

Highchart轴悬停

2 个答案: