highcharts - ハイチャートの背景色を変更することはできますか?

Question

次の状況を考慮してください。

    chart.options.chart.backgroundColor= {
        linearGradient: [0, 0, 0, 400],
        stops: [ [0, 'rgb(96, 96, 96)'], 
        [1, 'rgb(16, 16, 16)'] ]
    };
    chart.redraw():

それはすべてここにあります：http://jsfiddle.net/S8f86/3/

イベントでチャートの背景色を変更することはできますか?

Answer 1

チャートレンダラーとsvg属性を使用できます。

http://jsfiddle.net/S8f86/4/

this.renderer.button('Change background color', 74, 30, function(){

                        var gradient = {
                            linearGradient: [0, 0, 0, 400],
                            stops: [ [0, 'rgb(96, 96, 96)'], 
                                     [1, 'rgb(16, 16, 16)'] ]
                        };

                    chart.chartBackground.attr({
                        fill:gradient
                    });

                    }).add();

Answer 2

Highcharts には、これを行うための API 呼び出しがありません。ただし、基礎となる要素を取得して、それらに css スタイルを適用することはできます。例えば

chart.chartBackground.css(
        {
            color: '#555555',
        });

http://jsfiddle.net/xzUcC/

dom を直接操作しているため、チャートで redraw() を呼び出す必要はありません。

別のポスターで述べたように、次のように段階的な背景を作成できます。

 var gradient = {
        linearGradient: [0, 0, 0, 400],
                 stops: [ [0, 'rgb(96, 96, 96)'], 
                          [1, 'rgb(16, 16, 16)'] ]
        };
        chart.chartBackground.attr({
                 fill:gradient
        });