ここから本文です
モンタブロスの趣味日記
何でも自分でやることをモットーとしています

書庫全体表示

highchartsの自分向け備忘録です。

ちょっとでも間違えるとまったく表示しなくなるのが難点です。

#括弧対応が間違っているかも。

1. xAxisをdatetimeにする場合、以下のように書く

xAxis: {
type: 'datetime',
dateTimeLabelFormats: { //たぶんseriesで与える時間データで表示が決まる
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%m/%e %H:%M',
day: '%y/%m/%e',
week: '%y/%m/%e',
month: '%Y/%m',
year: '(%Y)'
},
title: {text: null} // 横軸のタイトル。nullは表示しない
},

2. yAxisを定義
yAxis: [{ // Primary yAxisの定義
title: {text: 'タイトル',style: {color: '#7D2123'}},
labels: {format: '{value}単位',style: {color: '#7D2123'}},
opposite: false, //右側の軸
plotBands : [{ // ゾーンを描画(例えば安全範囲のようなゾーンを描ける)
from : 130,
to : 85,
color : 'rgba(68, 170, 213, 0.2)',
label : {text : 'ゾーンの説明'}
}],
plotLines : [{ // 線の描画(上限のような線を描ける)
value : 140,
color : '#3A5574',
dashStyle : 'shortdash',
width : 2,
label : {text : '線の説明'}
}],
max: 150, // y軸の最大値。これにならない場合があるので、書かない(自動になる)ほうが良いかも
min: 60 // y軸の最小値。但し2軸になると有効ではなくならう
},{ // Secondary yAxisの定義(省略)
}
]

3. データを入れる時

seriesでは以下のように日付+値のペアで突っ込むと時系列のグラフになる

series: [{
name: '名前', // Y軸のラベル名
color: '#A5C329', // nameの色
type: 'column', // 棒グラフ指定の場合。lineにすると折れ線グラフになる
pointInterval: 24 * 3600 * 1000, // 1日単位。これ必要なのかな
pointStart: Date.UTC(2014, 3, 1), //開始日
yAxis: 1, //2番目のyAxisのデータという意味。0もしくは記載しない場合は1番目
data: [
[Date.UTC(2014, 2, 1,8,0,0), 15],
[Date.UTC(2014, 2, 2,19,0,0), 6 ],
[Date.UTC(2014, 2, 3,21,0,0), 7 ]],
tooltip: {valueSuffix: ' 単位'} //ポップアップに表示される単位指定
}]

4.そのほか(棒グラフの棒の幅を指定する)

         plotOptions: {column: {pointWidth: 10}} //棒グラフの棒の幅指定

この記事に

顔アイコン

顔アイコン・表示画像の選択

絵文字
×
  • オリジナル
  • SoftBank1
  • SoftBank2
  • SoftBank3
  • SoftBank4
  • docomo1
  • docomo2
  • au1
  • au2
  • au3
  • au4
  • 名前
  • パスワード
  • ブログ

開くトラックバック(0)

本文はここまでですこのページの先頭へ
みんなの更新記事