jqPlotのデータとオプションについて
オプションは
var opts={
};
まずは、タイトルの表示
title:'グラフタイトル',
この部分でタイトルを設定
これを省くとタイトルがなくなる
次に、データのラベル情報
これは、seriesで定義する
series:{
{
label:'データ1',
showMarker:false
},
{
label:'データ2',
showMarker:trueand
};
},
最初のハッシユの
{
label:’データ1′,
showMarker:false
},
は、1つめのデータに対する情報
2つめのハッシユの
{
label:’データ2′,
showMarker:true
};
は、2つめのデータに対する情報
showMarkerは、trueにすると
データのところにマーカーが表示される
falseなら、マーカーは非表示になる
マーカーは、折れ線グラフなら点がでる
次に、凡例の表示について
凡例は使い方とかを箇条書きにしたもの
凡例の表示は、legendでコントロールする
legend:{
show:true,
location:'ne',
}
show:falseにすると非表示になる
locationは、表示位置で、方角で書く
nなら Northなので北
neなら North Eastで北東
nwなら North West で北西
e なら East で東
se なら South East で南東
s なら Southで南
sw なら South West で南西
w なら West で西
となる
スマートフォンだと画面が小さいため
複数のグラフを並べると表示領域が小さくなり
スクロールしないとグラフが見れなくなってしまう
このため、凡例をグラフの上側に表示して確認しやすくする
見た目を考えれば、ne か nwあたり
次に、軸と目盛りの制限
軸は axesで設定
xaxisで X軸、yaxisでY軸を設定する
また、
labelReadererへ
$.jqplot.CanvasAxisLabelReaderer
を設定するとラベルの設定ができるようになる
グラフの目盛りの設定ができるようにするには
tickReadererへ
$.jqplot.CanvasAxisTickReaderer
を設定する
これにより
min:
で目盛りの最小値
max:
で目盛りの最大値
tickInterval:
で目盛りの幅を設定する
min:0,
max:100,
tickInterval:10
なら
0~100の目盛りで
目盛りは10,20,30 … というようになる
あと、目盛りのテキストを斜めに傾けたりするデザインにするなら
tickOptions:{angle:角度}
で設定できる
例えば
tickOptions:{angle:-30}
これらを使い、経済指標とかだしたいのなら
axes:{
xaxis:{
label:'雇用統計',
labelReaderer:$.jqplot.CanvasAxisLabelReaderer,
tickReaderer:$.jqplot.CanvasAxisTickReaderer,
tickOptions:{angle:-30}
},
yaxis:{
label:'2013年',
labelReaderer:$.jqplot.CanvasAxisLabelReaderer,
tickReaderer:$.jqplot.CanvasAxisTickReaderer,
}
}