様々なグラフの作成

様々なグラフの作成

水平棒グラフの作成の場合、

まずはデータ定義で

var bardata =[

[[30,1],[10,2],[40,3],[20,4]], //売上データ
[[5,1],[1,2],[7,3],[4,4]] //利益データ
];

このように、[値、カテゴリID]
というように指定する

カテゴリIDを設定したら
axesの中の yaxisでカテゴリ軸を利用する

axes:{

yaxis:{
renderer:$.jqplot.CategoryAxisReaderer,
ticks:['iPhoneアプリ開発','Androidアプリ開発','アフィリエイトサイト制作','電子書籍制作'];

}
}

次に、レンダラのオプションの
barDirectionへ
horizontalを設定する

seriesDefaults:{
renderer:$.jqplot.BarReaderer,
shadowAngle:135,
rendererOptions:{
barDirection:'horizontal'
}
},

今回は、
shadowAngle:135
で、影の角度を135度にしている

これは、デフォルトの状態だと
バーの影が
バーの延びているほうにかかり
終端が見えにくい為
shadowAngleで角度を変更しておく

次に、円グラフ

HTMLファイルで

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

で必要なファイルの読みこみ

<div id="piechart"></div>

で表示領域の設定

そして、Javascriptファイルで制御

piedata = [
['etc',2.1],
['Nexus7',9.6],
['HTC J ONE', 35.3],
['ubuntu 12.04',50.6],
['ipod touch',2.4]
];

opts={
title:'使用頻度',
seriesDefaults:{
renderer:jQuery.jqplot.PieReaderer,
rendererOptions:{
showDataLabels:true,
padding:8
}
},

legend:{
show:true,
location:'ne',
rendererOptions:{
numberRows:2
},
}

}
pieplot = $.jqplot('piechart',[pieplot],opts);

データについては
[‘etc’,2.1],
[‘Nexus7’,9.6],
[‘HTC J ONE’, 35.3],
[‘ubuntu 12.04’,50.6],
[‘ipod touch’,2.4]
というように、配列で
[ラベル, 値]で定義する

そして、円グラフを使うには
レンダラで
$.jqplot.PieReaderer
を使う

ソースは

seriesDefaults:{
renderer:jQuery.jqplot.PieReaderer,
rendererOptions:{
showDataLabels:true,
padding:8
}
},

showDataLabels:
は
円グラフの要素の値を表示する設定
trueなら数字を表示しなくなる