jqplot.pieRenderer.js

jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.pieRenderer.js」もしくは「jqplot.pieRenderer.min.js」は、円グラフ（パイチャート）を生成する際に読み込む必要があるjavascriptファイルだ。

「jqplot.pieRenderer.min.js」は、「jqplot.pieRenderer.js」の圧縮版で、機能に違いはない。

導入

「jqplot.pieRenderer.js」もしくは「jqplot.pieRenderer.min.js」は、jqPlotの「plugins」フォルダに入っている。

読み込み

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

もちろん、「jquery-1.7.1.min.js」や「jquery.jqplot.min.js」なども読み込む必要がある。

実装例（サンプル）

実装例（サンプル）について

実装例（サンプル）のソースコードについては、こちら。

オプション

pieRendererに関する主要なオプション。

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」。

lineWidth

スライスの枠線の幅。

showDataLabels

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

dataLabels

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

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

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

startAngle

1つ目のスライスを描き始める場所を角度で指定。初期設定値は「0」。

legend

凡例に関するオプション。

show

凡例を表示するか。「true」は表示。「false」は非表示。初期設定値は、「false」。

location

凡例を配置する位置（方角）。

• nw： 左上
• n： 上
• ne： 右上
• e： 右
• se： 右下
• s： 下
• sw： 左下
• w： 左

rendererOptions

凡例の生成編集オプション。

numberRows

凡例の最大行数を指定。初期設定値は「null」。

numberColumns

凡例の最大列数を指定。初期設定値は「null」。

実装例（サンプル）一覧

「jqplot.pieRenderer.js」もしくは「jqplot.pieRenderer.min.js」の実装例（サンプル）一覧。

• 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 プラグインで作る凡例付き円グラフ

  jQueryのjqPlotプラグインで、凡例付き円グラフ（パイチャート）を描く方法。

• jQuery の jqPlot プラグインで作る2列の凡例付き円グラフ

  jQueryのjqPlotプラグインで、2列の凡例付き円グラフ（パイチャート）を描く方法。

• jQuery の jqPlot プラグインで作るスライスを塗りつぶさない円グラフ

  jQueryのjqPlotプラグインで作るデータラベル付き円グラフ（パイチャート）において、スライスを塗りつぶさない方法。

• jQuery の jqPlot プラグインで作る、スライス間に余白がある円グラフ

  jQueryのjqPlotプラグインで作るデータラベル付き円グラフ（パイチャート）において、スライスとスライスの間に余白を入れる方法。

• jQuery の jqPlot で作る、塗りつぶさないスライス間に余白がある円グラフ

  jQueryのjqPlotプラグインで作るデータラベル付き円グラフ（パイチャート）において、スライスとスライスの間に余白を入れ、さらに、スライスを塗りつぶさない方法。

• jQuery の jqPlot の円グラフの1つ目のスライスを描き始める場所を指定

  jQueryのjqPlotプラグインで作る円グラフ（パイチャート）において、1つ目のスライスを描き始める場所を角度で指定する方法。

• jQuery UI と jqPlot で作るサイズを変更できる円グラフ

  jQueryのjqPlotプラグインで作る円グラフにおいて、jQuery UIのResizableを併用し、ドラッグ＆ドロップで、サイズを変更できるようにする方法。