Javascript 海图轴悬停

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

y轴[0]——条形图
y轴[1]——折线图1
y轴[2]——折线图2

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

我试过的

对于这个过程，我不知道如何获得我悬停的轴。所以我不能再往前走了

拨弄

---

提前感谢

看了这篇文章，似乎没有简单的方法

但是，您可以针对以下特定系列：

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

是您的柱状图。它似乎工作正常。演示：

您可以使用插件将事件附加到标签上。然后，您可以更新每个列的填充，请参阅第一列的演示：

当您使用axis.series时，在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' 
                        });
                    }
                }
            },

---

嗨，Rob，我想要的是当我们在降雨（y轴）上悬停时，条形图应该在图表更新答案和演示中改变颜色。嗨，Pawel Fus，我试图将其应用于折线图（温带），但颜色的变化仅适用于点，即它只适用于小菱形，不能应用于整条线。数据[1]不是将颜色应用于数据[0]之类的数据。是否有方法应用于与轴相关的所有数据。当然，要为每个标记应用颜色，只需在所有点上循环。要更改线条颜色，请使用该解决方案：感谢Pawel，它起作用了。当我们将鼠标移到轴标题上时，是否有办法更改图表颜色，我尝试在标题中调用mouseout和mouseover函数，但没有用。此时标题上的单击事件不可用，但这是需要的：因此我们将在最近的将来添加它。