jQuery の jqPlot の円グラフで、配列の内容をデータラベルとして表示

投稿日: 2012年4月2日作成者: alphasis

jQueryのjqPlotプラグインで作る円グラフ（パイチャート）において、配列で順番に指定した内容を、データラベルとして表示する方法。

実装例（サンプル）

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.pieRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />

読み込むファイル。

JavaScript

<script>
jQuery( function() {
jQuery . jqplot(
'jqPlot-sample',
[
[
[ 'Ａ', 53269 ],
[ 'Ｂ', 78493 ],
[ 'Ｃ', 35996 ],
[ 'その他', 10582 ]
]
],
{
seriesDefaults: {
renderer: jQuery . jqplot . PieRenderer,
rendererOptions: {
padding: 15,
dataLabels: [ 'Ａ社', 'Ｂ社', 'Ｃ社', 'その他', ],
showDataLabels: true
}
},
}
);
} );
</script>

seriesDefaults

グラフの種類や、系列の色、太さなど、系列に関する初期設定。

renderer

系列の生成編集に使うプラグインを指定。

jQuery . jqplot . BarRenderer：棒グラフ
jQuery . jqplot . BezierCurveRenderer：ベジェ曲線グラフ
jQuery . jqplot . BlockRenderer：ブロックチャート
jQuery . jqplot . BubbleRenderer：バブルチャート
jQuery . jqplot . DonutRenderer：ドーナツグラフ
jQuery . jqplot . MeterGaugeRenderer：メーターゲージ
jQuery . jqplot . MekkoRenderer：マリメッコ・チャート
jQuery . jqplot . OHLCRenderer：いかり足、ローソク足
jQuery . jqplot . PieRenderer：円グラフ
jQuery . jqplot . PyramidRenderer：ピラミッドグラフ

rendererOptions

系列の生成編集オプション。

padding

円グラフの円の周りの余白。初期設定値は「20」。

dataLabels

データラベルとして表示する内容。初期設定値は「percent」。

label：ラベル
value：値
percent：パーセンテージ

配列で順番に指定することもできる。

showDataLabels

データラベルを表示するか。「true」を指定するとデータラベルを表示する。初期設定値は「false」。

HTML

<div id="jqPlot-sample" style="height: 350px; width: 350px;"></div>

カテゴリー: JavaScript, jQuery, pieRenderer, グラフ、チャート, プラグイン, 円グラフパーマリンク