【highcharts】 グラフ全体に枠線を表示させる方法

ここでは、highchartsの設定オプションに付いて説明しています。
詳細はHighcharts API Referenceで確認してみてください。

■ borderColor , borderWidth

chartセクションにborderColorとborderWidthを追加する事で、
グラフ全体に枠線を書くことができます。具体的には以下のように記述します。

ソースコード
 
~~

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

~~



グラフ
Highcharts Example


また、グラフ部分の背景色の変更の仕方で紹介したlinearGradientを使用すれば、
枠線も色を少しずつ変化させることができます。コレを使うとちょっとおしゃれな感じになります。

 
~~

chart: {
            renderTo: 'container-pra1.4',
            borderColor:{ 
             linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(200, 200, 255)']
                ]
            },
      borderWidth: 5,
            type: 'line'
        },

~~



グラフ
Highcharts Example

枠線の色と太さを上手く使いこなせば、メリハリの利いたグラフが書けそうですね!

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

お気に入りサイト

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


コメントの投稿

非公開コメント

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



最新記事