WEB開発備忘録

HighChartsの設定メモ

<script type="text/javascript">
<!--
$(document).ready(function(){
  $('グラフ表示領域のセレクタ').highcharts({
  credits: {enabled:false}, // グラフ内の「highcharts」のクレジット表示/非表示を切り替え
  lang:{contextButtonTitle:'グラフをダウンロード/印刷',printChart:'グラフを印刷',downloadJPEG:'JPEG画像でダウンロード',downloadPNG:'PNG画像でダウンロード',downloadSVG:'SVGでダウンロード',downloadPDF:'PDFでダウンロード'}, // 印刷用リンク内の各テキスト
  colors:['グラフの色指定'],
  chart: {type: 'column',backgroundColor:'グラフ背景パレット色指定'},
  title:グラフのタイトル,
  xAxis: {
    categories: [カンマ区切りでX軸の各カテゴリ文字列('カテ1','カテ2','カテ3')],
    crosshair: true,
    labels: {style: {color: 'ラベル色指定'}}
   },
   yAxis: {
     min: 0, // Y軸目盛の最小値
     allowDecimals: false,  // Y軸目盛に小数点を許可するか?
     title: null,           // Y軸タイトル
     labels: {style: {color: 'Y軸ラベル色指定'}},
   },
   plotOptions: {
     column: {
       pointPadding: 0.2,  // プロットの位置
       borderWidth: 0      // プロットの罫線太さ
     }
   },
   series: [{
     name: 'データ名',
     data: [データをカンマ区切りで(2,3,0,0,4)]
   }],
   legend: {itemStyle: {color: 'データ説明用アイコン色指定'} }
  });
});
//-->
</script>