动态更改高图中的系列颜色

Changing series color in highcharts dynamically

本文关键字：系列 颜色 高图中 动态      更新时间：2023-09-26

我已经能够更改样条曲线图上的笔划颜色，但点和图例直到我通过单击它然后在每个点上鼠标来隐藏和显示序列之后才会更改颜色。

我这里有一把小提琴：http://jsfiddle.net/J56hm/2/

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
    // the button handler
    $('#button').click(function() {
        chart.series[0].color = "#FF0000";
        chart.series[0].graph.attr({ stroke: '#FF0000' });
        $.each(chart.series[0].data, function(i, point) {
           point.graphic.attr({ fill: '#FF0000' });
         });
        chart.series[0].redraw();
        chart.redraw();
    });
});​

你知道为什么会发生这种情况吗？或者有办法解决这个问题吗？

很简单，您可以使用以下代码

chart.series[0].options.color = "#008800";
chart.series[0].update(chart.series[0].options);

highcharts论坛上的以下线程有一个解决方案：

http://highslide.com/forum/viewtopic.php?f=9&t=7075&p=33437http://jsfiddle.net/G5Pk7/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});
$('#button').click(function() {
    var series = chart.series[0];
    series.color = "#FF00FF";
    series.graph.attr({ 
        stroke: '#FF00FF'
    });
    chart.legend.colorizeItem(series, series.visible);
    $.each(series.data, function(i, point) {
        point.graphic.attr({
            fill: '#FF00FF'
        });
    });
    series.redraw();
});

这显然是一个肮脏的解决方案，但似乎奏效了。

你看控制台了吗？

ReferenceError:未定义系列
http://fiddle.jshell.net/J56hm/1/show/
39号线

更改为以下解决了问题

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

但现在情况正好相反，当你悬停在这些点上时，它会再次变蓝您正试图通过设置颜色属性来直接操作由highcharts渲染的svg。这不是正确的方式，因为highchart可能会根据其渲染算法重新绘制图表，您所做的所有更改都可能丢失
在说了这么多之后，我仍然不知道在高图中有任何支持的方法可以做到这一点，如果我想出一些，我会更新答案

@jsFiddle

相关文章：