web-dev-qa-db-ja.com

ハイチャートのシリーズの色を動的に変更する

スプライングラフのストロークの色を変更できましたが、シリーズをクリックして各ポイントの上にマウスを置いてマウスを非表示にして表示するまで、ポイントと凡例の色は変わりません。

ここにフィドルがあります： 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();
    });
});​

これがなぜ起こっているのか、これを回避する方法はありますか？

javascripthighcharts
14
Soliah

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

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

8
Soliah

それは簡単です、あなたはこのコードを使うことができます

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

あなたはコンソールを見さえしましたか？

ReferenceError：シリーズが定義されていません
http://fiddle.jshell.net/J56hm/1/show/
39行目

次のように変更すると問題が解決しました

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

しかし、今度は反対のことが起こります。ポイントにカーソルを合わせると、再び青色になります。カラー属性を設定して、ハイチャートによってレンダリングされるSVGを直接操作しようとしています。 highchartはレンダリングアルゴリズムに基づいてグラフを再描画し、すべての変更が失われる可能性があるため、これは正しい方法ではありません。
すべてのことを言った後、私はこれを行うためにハイチャートでサポートされている方法をまだ知りません、何か思いついた場合は答えを更新します

@ jsFiddle

5
Jugal Thakkar