【highcharts】 グラフ部分のみ背景色を変更する

以前、グラフ全体の背景色を変更する方法を紹介しましたが、今回はグラフ部分のみの背景色を変更する方法を紹介します。一度に紹介すればよかったのですが長くなりそうなので別個の記事にしました。

方法はグラフ全体の背景色を変更するのとほぼ同じで、以下の記述をchart:{ }に追加します。
 
plotBackgroundColor: '#XXXXXX'
(XXXXXXにはHTMLの色指定番号を入れます)
グラフ全体の時はBackgroudColorでしたが、グラフ部分のみではplotBackgroundColorとなります。

で、実際のグラフはこちらになります。 Highcharts Example
 

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container-pra1.8',
            plotBackgroundColor: '#5A5555'
            type: 'line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

~



背景色は単色だけでなく、少しずつ色を変えることも可能です。
plotBackgroundColorで色を指定する代わりに以下の記述を加えます。
 
plotBackgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(200, 200, 50)']
                ]
            }
この記述を加えたグラフが以下のようになります。
数値を変更させることで色を好きなように変更することが出来ます。

Highcharts Example


関連記事
  
このエントリーをはてなブックマークに追加

イーロン・マスク 破壊者か創造神か (朝日文庫)
竹内一正
朝日新聞出版
売り上げランキング: 9,596

■よく読まれている人気記事


コメントの投稿

非公開コメント


author imageAuthor:Lynx
各データの推移を見守り中。
御連絡はこちらまでお願いします。



最新記事