如何禁用Highcharts中的鼠标悬停颜色变化？

Question

我正在使用柱状图制作项目。我编写了一个自定义函数，根据每个柱子的y值来着色。当我初始化图表时，这很有效。但是当我悬停在图表上时，柱子的颜色会恢复默认值，我的自定义颜色永远不会返回。

我尝试了禁用悬停，但似乎没有起作用。我不希望在悬停在柱子上时颜色改变。有什么建议吗？

- ruby

---

你可能以错误的方式设置了自定义颜色，能否展示一下？通常情况下，你应该按照以下方式为每一列设置特定的颜色：series: [{ data: [{x: x-value, y: y-value, color: 'red' }] }]。 - Paweł Fus

嗨，Pawel，我正在根据y值标准设置颜色。看一下这个例子http://jsfiddle.net/CaPG9/。在这里，当你悬停在上面时，颜色会改变回默认的蓝色。有没有办法禁用悬停时的默认行为？ - ruby

Answer 1

你正在寻找这个选项：

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

在这里玩转Fiddle。

编辑

不要直接修改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
        }]
    });

新的小样。

- Mark

---

嗨，马克：我已经尝试了那个选项，但是第一次悬停在上面时它仍然会改变我的自定义颜色。我不想失去基于条形图 y 值定制的颜色。 - ruby

@ssp，我不明白。您想要第一次悬停时将其更改为自定义颜色，但随后的悬停不再更改吗？ - Mark

看一下这个例子 http://jsfiddle.net/CaPG9/ 如果你将鼠标悬停在上面，它会改变颜色回到蓝色，然后你就无法通过函数恢复原来的颜色。我不想让条形图在悬停时发生任何颜色变化。 - ruby

@ssp，你最好在highcharts api内部更改颜色。它不会善意地接受你在其控制范围之外修改SVG，这应该是最后的选择。请参见更新的答案。 - Mark

嗨 Mark，你能否展示一个多个条件的相同示例 - 就像if-else-if else？另外，我正在根据图表上两个系列的y值设置系列的颜色。 - ruby

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/46025/discussion-between-ssp-and-mark - ruby

Answer 2

您在错误的方式中更新颜色，应该使用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'
                });

        });

    });

- Paweł Fus