【highcharts】 グラフ全体の背景色を変更する

ここでは、highchartsの設定オプションを見ていきます。
詳細や他の機能はHighcharts API Referenceで確認することができます。

■backgroundColor: '#******'

グラフ部分の背景色を変えるには、chartsセクションにbackgroundColorを追加するだけでOKです。
色の指定はHTMLのカラーコードを使います。

ソースコード
 
$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container-pra1.1',
            backgroundColor: '#4CFFC5',
            type: 'line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
以下略

グラフ
Highcharts Example


よりオシャレにするには、linearGradientを使用することで徐々に色を変えていくこともできます。
色の変化具合はパラメーターを各自でいじって調整できます

ソースコード
chart: {
            renderTo: 'container-pra1.2',
             backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(200, 200, 255)']
                ]
            },
            type: 'line'
        },
 

グラフ
Highcharts Example


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

お気に入りサイト

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


コメントの投稿

非公開コメント

Index for HighCharts FreQuent
author imageAuthor:Lynx
データをグラフ化&推移を見守り中。
御連絡はこちらまでお願い致します。



最新記事