如何禁用 Highcharts 中的悬停颜色变化？答案

【问题标题】：How to disable the on-hover color change in Highcharts?如何禁用 Highcharts 中的悬停颜色变化？
【发布时间】：2014-02-15 12:56:51
【问题描述】：

我正在为我的项目使用柱形图。我编写了一个自定义函数，根据 y 值对图表的每个条形进行着色。当我初始化图表时，这工作正常。当我将鼠标悬停在图表上时，条形图的颜色会恢复为默认值，而我的自定义颜色永远不会返回。

我尝试在悬停时禁用，但这似乎不起作用。即使将鼠标悬停在栏上，我也不希望颜色发生变化。有什么建议吗？

【问题讨论】：

您可能以错误的方式设置自定义颜色，您能证明一下吗？一般来说，您应该以这种方式为每一列设置特定颜色：series: [{ data: [{x: x-value, y: y-value, color: 'red' }] }]
嗨 Pawel，我正在根据 y 值标准设置颜色。看看这个例子jsfiddle.net/CaPG9。在这里，当您将鼠标悬停在它上面时，颜色会变回默认的蓝色。有没有办法在悬停时禁用此默认行为？

标签： colors highcharts hover

【解决方案1】：

您以错误的方式更新颜色，请改用point.update()：http://jsfiddle.net/CaPG9/8/

    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        series: [{
            name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }]
    },function(chart){

        var max = 200;

        $.each(chart.series[0].data,function(i,data){

            if(data.y > max)
                data.update({
                    color:'red'
                });

        });

    });

【讨论】：

【解决方案2】：

您正在寻找this option:

   plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    },

小提琴here。

编辑

不要直接修改 SVG 来设置颜色，而是在 api 中进行：

    var max = 200;
    var seriesData = $.map([107, 31, 635, 203, 2],function(datum, i){
        return {
            color: datum > max ? 'red' : '#2f7ed8',
            y: datum
        };
    });


  $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        series: [{
            name: 'Year 1800',
            data: seriesData
        }]
    });

新的fiddle。

【讨论】：

嗨，马克：我已经尝试过这个选项，但它仍然会在第一次将鼠标悬停在它上面时改变我的自定义颜色。我不想丢失我根据条形的 y 值自定义的颜色
@ssp，我不明白。您希望第一次悬停时将其更改为自定义颜色，但在随后的悬停时不再更改？
看看这个例子jsfiddle.net/CaPG9 如果你将鼠标悬停在它上面，它的颜色会变回蓝色，然后你就不能恢复你用函数设置的原始颜色。我不想对悬停时的条进行任何颜色更改
@ssp，你最好改变 highcharts api 中的颜色。它永远不会善待您在其控制之外修改 SVG，这应该作为最后的手段。查看更新的答案。
HI 标记，您能否为多个条件显示相同的示例 - 比如 if - else -if else？我还根据图表上两个系列的 y 值设置系列的颜色。