jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.bubbleRenderer.js」もしくは「jqplot.bubbleRenderer.min.js」は、バブルチャートを生成する際に読み込む必要があるjavascriptファイルだ。
「jqplot.bubbleRenderer.min.js」は、「jqplot.bubbleRenderer.js」の圧縮版で、機能に違いはない。
導入
「jqplot.bubbleRenderer.js」もしくは「jqplot.bubbleRenderer.min.js」は、jqPlotの「plugins」フォルダに入っている。
読み込み
パスは、アップロードした場所を指定する。
もちろん、「jquery-1.7.1.min.js」や「jquery.jqplot.min.js」なども読み込む必要がある。
実装例(サンプル)
実装例(サンプル)について
実装例(サンプル)のソースコードについては、こちら。
オプション
bubbleRendererに関する主要なオプション。
- 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
画像生成編集オプション。
- varyBubbleColors
seriesColorsオプションの配列に従って、この系列の各バブルの色を変えるか。「true」を指定すると、seriesColorsの配列に従って、この系列の各バブルの色を変える。「false」を指定すると、系列ごとに同一色でバブルを塗る。初期設定値は「true」。
- autoscaleBubbles
バブルチャートのバブルの大きさを、グラフの大きさに基づいて、拡大縮小するか。「true」は拡大縮小する。「false」は拡大縮小せず、値をそのまま、バブルの半径のピクセル値として使う。初期設定値は「true」。
- autoscaleMultiplier
バブルチャートのバブルの大きさを、乗数で調整。初期設定値は「1.0」。
- autoscalePointsFactor
バブルチャートのバブルの大きさを、バブルの数に応じて調整。負の値を指定すると、より小さく、正の値を指定すると、より大きく調整する。「0」を指定すると、バブルの数に応じた調整はしない。初期設定値は「-0.07」。
- escapeHtml
バブルのラベルのテキストのHTMLをエスケープするか。初期設定値は「true」。
- highlightMouseOver
バブルにカーソルを合わせている間(マウスオーバー時)、バブルをハイライト表示(強調表示)するか。初期設定値は「true」。
- highlightMouseDown
バブルにカーソルを合わせ、マウスのボタンを押し続けている間、ハイライト表示(強調表示)させるか。「true」はハイライト表示。「false」はハイライト表示しない。初期設定値は「false」。
- highlightColors
ハイライト表示色を指定。配列で順番に指定することもできる。
- bubbleAlpha
バブルチャートのバブルの不透明度。初期設定値は「1.0」。
- highlightAlpha
バブルチャートのバブルのハイライト表示時の不透明度。初期設定値は、「null」で、bubbleAlphaの値と同じ値を使用する。
- bubbleGradients
バブルチャートのバブルの色を、グラデーションにするか。「true」はグラデーションにする。「false」はグラデーションにしない。初期設定値は「false」。
- showLabels
バブルチャートの系列のラベルを表示するか。「true」は表示。「false」は非表示。初期設定値は「true」。
- shadowAlpha
影の不透明度。初期設定値は「0.1」。
実装例(サンプル)一覧
「jqplot.bubbleRenderer.js」もしくは「jqplot.bubbleRenderer.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 のバブルチャートのバブルサイズを拡大縮小させない
jQueryのjqPlotプラグインで作るバブルチャートにおいて、バブルの大きさを、グラフの大きさに基づいて、拡大縮小させない方法。
-
jQuery の jqPlot のバブルチャートのバブルサイズを乗数で調整
jQueryのjqPlotプラグインで作るバブルチャートにおいて、バブルの大きさを、乗数で調整する方法。
-
jQuery の jqPlot のバブルチャートのバブル数に応じバブルサイズ調整
jQueryのjqPlotプラグインで作るバブルチャートにおいて、バブルの大きさを、バブルの数に応じて調整する方法。
-
jQuery の jqPlot のバブルチャートの系列のラベルを非表示にする
jQueryのjqPlotプラグインで作るバブルチャートにおいて、系列のラベルを非表示にする方法。
-
jQuery の jqPlot のバブルチャートでマウスダウンイベント時ハイライト表示
jQueryのjqPlotプラグインで作るバブルチャートにおいて、バブルにカーソルを合わせ、マウスのボタンを押し続けている間、ハイライト表示(強調表示)させる方法。
-
jQuery の jqPlot で作る系列ごとに同一色のバブルチャート
jQueryのjqPlotプラグインで作るバブルチャートにおいて、系列ごとに同一色でバブルを塗る方法。
-
jQuery UI と jqPlot で作るサイズを変更できるバブルチャート
jQueryのjqPlotプラグインで作るバブルチャートにおいて、jQuery UIのResizableを併用し、ドラッグ&ドロップで、サイズを変更できるようにする方法。