グラフのカスタマイズ

グラフのカスタマイズ

グラフの色を変更するには
seriesColorsオプションを使う

opts= [

seriesColors :[
 "#FF0000",
 "#00FF00",
],

]

複数グラフを作成するならかなり使える

次に、日付
グラフの軸に日付を付けることができる
株価チャートとか、経済指標とかのグラフを作るなら有効な手法

軸に日付を使うなら
jqplot.dateAxisReadererプラグインを使う
これを使うには、まずHTMLで

<script src="js/jqplot/plugins/jqplot.dateAxisReaderer.min.js"></script>

で必要なライブラリーを読み込む

次に、Javascriptで日付データを配列で作成し
オプションのX軸を描画するxaxisで
設定する

日付のデータは
月/日/年
のフォーマットで記述する

data = [
["2014/03/20",17.5],
["2014/03/21",16.5],
....
],
opts={
axes:{
xaxis:{
renderer:$.jqplot.DateAxisReaderer,
tickReaderer:$.jqplot.CanvasTickReaderer,tickOptions:{
formatString:"'%Y/%#m/%#d'",
angle:-30
}
},

}
}

となる

日付を利用したいのなら
renderer:
へ
$.jqplot.DateAxisReaderer
を指定し

formatString:
でフォーマットを指定する

指定できるフォーマットは
%Y
2014 みたいな4桁の西暦

%y
14 みたいな2桁の西暦

%m
03 みたいな2桁の月

%#m
月

%B
September みたいな英語での月の名前

%b
Sep みたいな英語のニュースででる省略された月の名前

%d
03 みたいな2桁の日付

%#d
日付

%A
曜日

%a
省略型の曜日
日曜日ならSun

%H
03 など24時間表記の時間

%#H
3などの24時間表記の時間

%I
03などの12時間表記の時間

%#I
3などの12時間表記の時間

%M
2桁表記で分を表示

%#M
分を表示

%S
2桁で秒を表示

%#S
秒を表示

基本的に#を付けないなら2桁表記になる