jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.donutRenderer.js」もしくは「jqplot.donutRenderer.min.js」は、ドーナツグラフを生成する際に読み込む必要があるjavascriptファイルだ。
「jqplot.donutRenderer.min.js」は、「jqplot.donutRenderer.js」の圧縮版で、機能に違いはない。
導入
「jqplot.donutRenderer.js」もしくは「jqplot.donutRenderer.min.js」は、jqPlotの「plugins」フォルダに入っている。
読み込み
パスは、アップロードした場所を指定する。
もちろん、「jquery-1.7.1.min.js」や「jquery.jqplot.min.js」なども読み込む必要がある。
実装例(サンプル)
実装例(サンプル)について
実装例(サンプル)のソースコードについては、こちら。
オプション
donutRendererに関する主要なオプション。
- 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」。
- sliceMargin
スライスとスライスの間の余白。初期設定値は「0」。
- fill
スライスを塗りつぶすか。「true」を指定すると、スライスを塗りつぶす。「false」を指定すると、スライスを塗りつぶさない。初期設定値は「true」。
- showDataLabels
データラベルを表示するか。「true」を指定するとデータラベルを表示する。初期設定値は「false」。
- dataLabels
データラベルとして表示する内容。初期設定値は「percent」。
配列で順番に指定することもできる。
- startAngle
1つ目のスライスを描き始める場所を角度で指定。初期設定値は「0」。
- legend
凡例に関するオプション。
- show
凡例を表示するか。「true」は表示。「false」は非表示。初期設定値は、「false」。
- location
凡例を配置する位置(方角)。
- nw: 左上
- n: 上
- ne: 右上
- e: 右
- se: 右下
- s: 下
- sw: 左下
- w: 左
- rendererOptions
凡例の生成編集オプション。
- numberRows
- 凡例内の最大行数を指定。初期設定値は「null」。
- numberColumns
- 凡例の最大列数を指定。初期設定値は「null」。
実装例(サンプル)一覧
「jqplot.donutRenderer.js」もしくは「jqplot.donutRenderer.min.js」の実装例(サンプル)一覧。
-
jQuery の jqPlot プラグインで作るドーナツグラフ
jQueryのjqPlotプラグインで、ドーナツグラフを描く方法。
-
jQuery の jqPlot プラグインで作る2重ドーナツグラフ
jQueryのjqPlotプラグインで、2重ドーナツグラフを描く方法。
-
jQuery の jqPlot で作るスライス間に余白があるドーナツグラフ
jQueryのjqPlotプラグインで作るデータラベル付きドーナツグラフにおいて、スライスとスライスの間に余白を入れる方法。
-
jQuery の jqPlot プラグインで作るデータラベル付きドーナツグラフ
jQueryのjqPlotプラグインで、データラベル付きドーナツグラフを作る方法。
-
jQuery の jqPlot のドーナツグラフにおいて、ラベルをデータラベルとして表示
jQueryのjqPlotプラグインで作るドーナツグラフにおいて、ラベルをデータラベルとして表示する方法。
-
jQuery の jqPlot のドーナツグラフにおいて、値をデータラベルとして表示
jQueryのjqPlotプラグインで作るドーナツグラフにおいて、値をデータラベルとして表示する方法。
-
jQuery の jqPlot のドーナツグラフでパーセンテージをデータラベルとして表示
jQueryのjqPlotプラグインで作るドーナツグラフにおいて、パーセンテージをデータラベルとして表示する方法。
-
jQuery の jqPlot のドーナツグラフで、配列の内容をデータラベルとして表示
jQueryのjqPlotプラグインで作るドーナツグラフにおいて、配列で順番に指定した内容を、データラベルとして表示する方法。
-
jQuery の jqPlot のドーナツグラフの1つ目のスライスを描き始める場所を指定
jQueryのjqPlotプラグインで作るドーナツグラフにおいて、1つ目のスライスを描き始める場所を角度で指定する方法。
-
jQuery の jqPlot プラグインで作るスライスを塗りつぶさないドーナツグラフ
jQueryのjqPlotプラグインで作るデータラベル付きドーナツグラフにおいて、スライスを塗りつぶさない方法。
-
jQuery の jqPlot プラグインで作る凡例付きドーナツグラフ
jQueryのjqPlotプラグインで、凡例付きドーナツグラフを描く方法。
-
jQuery の jqPlot プラグインで作る2列の凡例付きドーナツグラフ
jQueryのjqPlotプラグインで、2列の凡例付きドーナツグラフを描く方法。