动态更改高图中的系列颜色 [英] Changing series color in highcharts dynamically

问题描述

我能够更改样条曲线图上的笔触颜色，但点和图例不会改变颜色，直到我隐藏并通过单击并显示该系列，然后将鼠标移到每个点上。

我有一个小提琴： http://jsfiddle.net/J56hm/2/

  $（function（）{
 var chart = new Highcharts.Chart（{
图：{
 renderTo：'container'
}，
 xAxis：{
 categories：['Jan'，'Feb'，'Mar'，'Apr'，'May '，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec'] 
}，
 
 series：[{
数据：[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（）{
 chart.series [0] .color =＃FF0000; 
 chart.series [0] .graph.attr（{stroke：'＃FF0000'}）; 
 $ b $ .each（chart.series [0] .data，function（i，point）{
 point.graphic.attr（{fill：'＃FF0000'}）; 
}）; 
 chart.series [0] .redraw（）; 
 chart.redraw（）; 
}）; 
}）; 
  

任何想法为什么会发生这种情况或解决方法？

解决方案

在highcharts论坛上的以下主题有一个解决方案：

http://highslide.com/forum/viewtopic .php？f = 9& t = 7075& p = 33437 用小提琴 http://jsfiddle.net /

$ p $ var chart = new Highcharts.Chart（{
chart：/ G5Pk7 / ） {
renderTo：'container'
}，
xAxis：{
categories：['Jan'，'Feb'，'Mar'，'Apr'，'May'， 'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec']
}，

系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4]
}]
}）;
$ b $（'＃button'）。click（function（）{
var series = chart.series [0];
series.color =＃FF00FF;
series.graph.attr（{
stroke：'＃FF00FF'
}）;
chart.legend.colorizeItem（series，series.visible）;
$。每个（series.data，function（i，point）{
point.graphic.attr（{
fill：'＃FF00FF'
}）;
}）;
series.redraw（）;
}）;


这显然是一个肮脏的解决方案，但似乎可行。

I have been able to change the stroke color on a spline graph, but the points and the legend do not change color until after I hide and show the series by clicking it and then mousing over each of the points.

I have a fiddle here: 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();
    });
});​

Any idea why this is happening or a way to work around this?

解决方案

The following thread on the highcharts forum has a solution:

http://highslide.com/forum/viewtopic.php?f=9&t=7075&p=33437 with a fiddle http://jsfiddle.net/G5Pk7/ that illustrates it.

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();
});

This is clearly a dirty solution, but seems to work.

这篇关于动态更改高图中的系列颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！