【highcharts】 グラフ部分に影を付ける

今回はグラフをカッコ良く見せるためのオプションを紹介します
詳しくはHighcharts API Referenceを見てください。

■plotShadow

highchartsでは以下の記述をすることで容易にグラフ部分に影を付けることができます。

plotShadow: true 


では,実際にどんな感じになるのか見てみましょう
Highcharts Example

少しわかりずらいですけど、グラフが描かれている部分の枠線に薄い影が表示されていると思います。
この"plotShadow"は、以下に示したソースのようにplotBackgroundで色を指定しないと表示されない(plotShadow単体での使用は出来ない)ので注意が必要です(今回は背景色を白に設定しています。白以外でも影を表示させることは可能ですが、見えにくいのであまりお勧めできません)。

ソース
 
~~

$(function () { var chart = new Highcharts.Chart({ chart: { renderTo: 'container-pra1.12', type: 'line',       plotBackgroundColor: '#FFFFFF', plotShadow: true }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, ~~
関連記事
  
このエントリーをはてなブックマークに追加


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


コメントの投稿

非公開コメント

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



最新記事