2012-09-14 8 views
9

スプライングラフのストロークカラーを変更することはできましたが、ポイントと凡例は色を変更しない限り、シリーズを非表示にしてからクリックして表示し、ポイント。 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(); 
    }); 
});​ 

任意のアイデアは、なぜこれが起こっているか、この問題を回避する方法:

は、私はここでバイオリンを持っていますか?

答えて

6

を思い付く場合の答えを更新し、これを行うにはhighchartsでサポートされる任意の方法を知りません解決策:

http://highslide.com/forum/viewtopic.php?f=9&t=7075&p=33437これを示しているのは、http://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(); 
}); 

これは明らかに汚い解決策ですが、うまくいくようです。

+0

なぜこれは「汚い」解決策ですか?これは私にとって素晴らしい仕事でした! – user1415427

5

あなたもコンソールを見ましたか?

問題に

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

を解決しかし、今は逆に、あなたがポイントにカーソルを合わせると、それはあなたが直接によってレンダリングされたSVGを操作しようとしている 再び青になり、たまたま次のように変更

ReferenceError: series is not defined
http://fiddle.jshell.net/J56hm/1/show/
Line 39

カラー属性を設定することによってハイチャートを作成します。ハイチャートがレンダリングアルゴリズムに基づいてチャートを再描画し、すべての変更が失われる可能性があるため、これは正しい方法ではありません。すべてのことを言った後
は、私はまだ私が何かhighchartsフォーラムで次のスレッドがあり

@ jsFiddle

+0

に私のミスを、このコードを使用することができます。私は質問を投稿し、コンソールを見ていないときに急いでいた。私の疑問はまだ残っていますが、SVGの修正を含んでいても汚い作業を見つけたかもしれません。 – Soliah

30

それは簡単です、あなたはエラーで

chart.series[0].options.color = "#008800"; 
chart.series[0].update(chart.series[0].options); 
関連する問題