様々なグラフの作成、その2

様々なグラフの作成　その2

次に、バブルチャート

これは、2次元グラフに各ポイントの数値の大きさを円の大きさで表すグラフ

シェアの割合とか、規模の大きさをわかりやすくするときに使うグラフ

これを使うには
まずHTMLファイルで

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

でライブラリーの読みこみ

表示するjQueryMobileのページIDはbubble

<div data-role="page" id="bubble">
</div>

そして、divで表示領域の設定

<div id="bubblechart"></div>

後は、Javascriptで表示

$(document).on("pageshow","#bubble",function(e){

//バブルチャートのデータの用意
//横軸、縦軸、円の大きさ、ラベル
var bubbledata = [
[4224273,835338, 22954,"Mac"],
[3004640,520414,21858,"Windows"],
[3434543,440676,18418,"Linux"]
];

var opts={
title:'自分的OS普及状態'
seriesDefaults:{
renderer:$.jqplot.BubbleReaderer,
rendererOptions:{
//バブルの透明度
bubbleAlpha:0.6,
//バブルを選択した時の透明度
highlightAlpha:0.8
},
shadow:true,
//バブルの影の透明度
shadowAlpha:0.05
},

//ラベル関連設定
axes:{
xaxis:{
label:'販売されたマシンの数'
},
labelReaderer:$.jqplot.CanvasAxisLabelReaderer,
tickReaderer:$.jqplot.CanvasTickReaderer,
tickOptions:{angle:-60}
},
yaxis:{
label:'搭載OS',
labelReaderer:$.jqplot.CanvasAxisLabelReaderer,
tickReaderer:$.jqplot.CanvasAxisTickReaderer
}
},
};

//バブルチャートの表示
$.jqplot.config.enablePlugins = true;
bubbleplot = $.jqplot('bubblechart',[bubbledata],opts);

});

バブルチャートを使うなら
レンダラは
$.jqplot.BubbleReaderer
を使う

そして、データは
[横軸、縦軸、円の大きさ、ラベル]
の順番で記述

rendererOptions:{

}
では、見た目の設定をしている

bubbleAlpha
バブルの透明度

highlightAlpha
バブルを選択した時の透明度

shadowAlpha
バブルの影の透明度

となる