jqplot.barRenderer.js

jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.barRenderer.js」もしくは「jqplot.barRenderer.min.js」は、縦棒グラフ、横棒グラフ、ウォーターフォールチャートなど、棒グラフを生成する際に読み込む必要があるjavascriptファイルだ。

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

導入

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

読み込み

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

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

実装例（サンプル）

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

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

オプション

barRendererに関するオプション。

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

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

barPadding

同カテゴリ異系列の、隣接する棒（バー）と棒の間の距離。初期設定値は「8」。

barMargin

隣接するカテゴリとの距離。初期設定値は「10」。

barDirection

棒グラフの種類。「vertical」か「horizontal」。初期設定値は「vertical 」。

• vertical： 縦棒（垂直）グラフ
• horizontal： 横棒（水平）グラフ

barWidth

棒（バー）の幅。「null」を指定すると、自動的に算出する。初期設定値は「null」。

shadowOffset

棒（バー）の端から影へのオフセット。初期設定値は「2」。

shadowDepth

影の太さ。初期設定値は「5」。

shadowAlpha

影の不透明度。初期設定値は「0.08」。

waterfall

ウォーターフォールチャートにするか。「true」を指定すると、ウォーターフォールチャートにする。初期設定値は「false」。

groups

棒（バー）を、ここで指定した数のグループに分類することができる。初期設定値は「1」。

varyBarColor

系列ごとに棒（バー）の色を変えるのではなく、カテゴリごとに棒の色を変えるか。「true」を指定すると、カテゴリごとに棒の色を変える。初期設定値は「false」。

highlightMouseOver

棒（バー）にカーソルを合わせている間（マウスオーバー時）、棒をハイライト表示（強調表示）するか。初期設定値は「true」。

highlightMouseDown

棒（バー）にカーソルを合わせ、マウスのボタンを押し続けている間、ハイライト表示（強調表示）させるか。「true」はハイライト表示。「false」はハイライト表示しない。初期設定値は「false」。

highlightColors

ハイライト表示色を指定。配列で順番に指定することもできる。

series

各系列ごとに指定する系列に関するオプション。１つ目の系列から順に、配列で指定する。

renderer

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

• jQuery . jqplot . BarRenderer： 棒グラフ

rendererOptions

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

barPadding

同カテゴリ異系列の、隣接する棒（バー）と棒の間の距離。初期設定値は「8」。

barMargin

隣接するカテゴリとの距離。初期設定値は「10」。

barDirection

棒グラフの種類。「vertical」か「horizontal」。初期設定値は「vertical 」。

• vertical： 縦棒（垂直）グラフ
• horizontal： 横棒（水平）グラフ

barWidth

棒（バー）の幅。「null」を指定すると、自動的に算出する。初期設定値は「null」。

shadowOffset

棒（バー）の端から影へのオフセット。初期設定値は「2」。

shadowDepth

影の太さ。初期設定値は「5」。

shadowAlpha

影の不透明度。初期設定値は「0.08」。

waterfall

ウォーターフォールチャートにするか。「true」を指定すると、ウォーターフォールチャートにする。初期設定値は「false」。

groups

棒（バー）を、ここで指定した数のグループに分類することができる。初期設定値は「1」。

varyBarColor

系列ごとに棒（バー）の色を変えるのではなく、カテゴリごとに棒の色を変えるか。「true」を指定すると、カテゴリごとに棒の色を変える。初期設定値は「false」。

highlightMouseOver

棒（バー）にカーソルを合わせている間（マウスオーバー時）、棒をハイライト表示（強調表示）するか。初期設定値は「true」。

highlightMouseDown

棒（バー）にカーソルを合わせ、マウスのボタンを押し続けている間、ハイライト表示（強調表示）させるか。「true」はハイライト表示。「false」はハイライト表示しない。初期設定値は「false」。

highlightColors

ハイライト表示色を指定。配列で順番に指定することもできる。

実装例（サンプル）一覧

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

• jQuery の jqPlot プラグインで作るシンプルな縦棒グラフ

  jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.barRenderer.min.js」を使えば、縦棒グラフを描くことができる。

• jQuery の jqPlot プラグインで作るシンプルな横棒グラフ

  jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.barRenderer.min.js」を使い、「barDirection」オプションに「horizontal」を指定すれば、横棒グラフを描くことができる。

• jQuery の jqPlot プラグインで作る複数系列の縦棒グラフ

  jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.barRenderer.min.js」を使えば、縦棒グラフを描くことができる。複数の系列データの配列を用意すれば、複数系列の縦棒グラフも描ける。

• jQuery の jqPlot プラグインで作る複数系列の横棒グラフ

  jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.barRenderer.min.js」を使えば、横棒グラフを描くことができる。複数の系列データの配列を用意すれば、複数系列の横棒グラフも描ける。

• jQuery の jqPlot で作る外側右の凡例付き複数系列の縦棒グラフ

  jQueryのjqPlotプラグインで作る複数系列の縦棒グラフにおいて、グラフの外側の右中央に凡例を表示する方法。

• jQuery の jqPlot で作る内側上の横並び凡例付き縦棒グラフ

  jQueryのjqPlotプラグインで作る複数系列の縦棒グラフにおいて、グラフの内側の上中央に、系列ラベルを横に並べた凡例を表示する方法。

• jQuery の jqPlot プラグインで作る積み上げ縦棒グラフ

  jQueryのjqPlotプラグインで作る積み上げ縦棒グラフを作る方法。stackSeriesオプションで、積み上げグラフにするか指定できる。「true」にすると積み上げグラフになる。

• jQuery の jqPlot プラグインで作る積み上げ横棒グラフ

  jQueryのjqPlotプラグインで作る積み上げ横棒グラフを作る方法。stackSeriesオプションで、積み上げグラフにするか指定できる。「true」にすると積み上げグラフになる。

• jQuery の jqPlot プラグインで作る縦棒グラフの系列の色を変更

  jQueryのjqPlotプラグインで作る縦棒グラフの系列の色を変更する方法。seriesオプション内の、colorプロパティで、系列の色を、系列ごとに指定することができる。

• jQuery の jqPlot で作る積み上げ縦棒グラフの系列の色を変更

  jQueryのjqPlotプラグインで作る積み上げ縦棒グラフの系列の色を変更する方法。seriesオプション内の、colorプロパティで、系列の色を、系列ごとに指定することができる。

• jQuery の jqPlot プラグインで作る横棒グラフの系列の色を変更

  jQueryのjqPlotプラグインで作る横棒グラフの系列の色を変更する方法。seriesオプション内の、colorプロパティで、系列の色を、系列ごとに指定することができる。

• jQuery の jqPlot で作る積み上げ横棒グラフの系列の色を変更

  jQueryのjqPlotプラグインで作る積み上げ横棒グラフの系列の色を変更する方法。seriesオプション内の、colorプロパティで、系列の色を、系列ごとに指定することができる。

• jQuery の jqPlot プラグインで作る科目別得点推移の縦棒グラフ

  jQueryのjqPlotプラグインで、科目別得点推移の縦棒グラフを描くチュートリアル。

• jQuery の jqPlot で作る科目別得点推移の積み上げ縦棒グラフ

  jQueryのjqPlotプラグインで、科目別得点推移の積み上げ縦棒グラフを描くチュートリアル。

• jQuery の jqPlot プラグインで作るデータポイントラベル付き縦棒グラフ

  jQueryのjqPlotプラグインで、データポイントラベル付き縦棒グラフを描く方法。

• jQuery の jqPlot プラグインで作るデータポイントラベル付き横棒グラフ

  jQueryのjqPlotプラグインで、データポイントラベル付き横棒グラフを描く方法。

• jQuery の jqPlot の縦棒グラフで、値が0のデータポイントラベルを非表示に

  jQueryのjqPlotプラグインによる、データポイントラベル付き縦棒グラフにおいて、値が「0」のデータポイントラベルを表示させない方法。

• 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プラグインで作るウォーターフォールチャートにおいて、垂直グリッド線（X軸のグリッド線）を非表示にする方法。

• jQuery の jqPlot で作るポイントラベル付きウォーターフォールチャート

  jQueryのjqPlotプラグインで、データポイントラベル付きウォーターフォールチャートを作る方法。

• jQuery の jqPlot で作る右のY軸を使うウォーターフォールチャート

  jQueryのjqPlotプラグインで、右のY軸を使うウォーターフォールチャートを作る方法。

• jQuery の jqPlot プラグインで作る水平グリッド線が非表示の横棒グラフ

  jQueryのjqPlotプラグインで、水平グリッド線（Y軸の目盛りのグリッド線）が非表示の横棒グラフを作る方法。

• 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プラグインで作る横棒グラフにおいて、指定したXの値に、垂直の実線を描き加える方法。

• jQuery の jqPlot の横棒グラフに垂直の破線を描き加える

  jQueryのjqPlotプラグインで作る横棒グラフにおいて、指定したXの値に、垂直の破線を描き加える方法。

• jQuery の jqPlot の縦棒グラフにおいて、目盛りラベルの角度を調整

  jQueryのjqPlotプラグインで作る縦棒グラフにおいて、目盛りラベルの角度を調整する方法。

• jQuery の jqPlot プラグインで作る、折れ線と縦棒を併用したグラフ

  jQueryのjqPlotプラグインで、折れ線グラフと縦棒グラフを、ひとつのグラフの中で、同時に出現させる方法。

• jQuery の jqPlot で作る縦棒グラフの縦棒をアニメーションで出現

  jQueryのjqPlotプラグインで作る縦棒グラフにおいて、縦棒をアニメーションで出現させる方法。

• jQuery の jqPlot の縦棒グラフの縦棒とポイントラベルをアニメーションで出現

  jQueryのjqPlotプラグインで作る縦棒グラフにおいて、縦棒とデータポイントラベルを、アニメーションで出現させる方法。

• jQuery の jqPlot で作る、ドラッグでY軸方向だけ伸縮できる縦棒グラフ

  jQueryのjqPlotプラグインで作る縦棒グラフにおいて、ドラッグで、縦棒を、Y軸（縦）方向だけ、伸縮できるようにする方法。

• jQuery の jqPlot で作る、ドラッグでX軸方向だけ伸縮できる横棒グラフ

  jQueryのjqPlotプラグインで作る横棒グラフにおいて、ドラッグで、横棒を、X軸（横）方向だけ、伸縮できるようにする方法。

• 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を併用し、ドラッグ＆ドロップで、サイズを変更できるようにする方法。

• jQuery の jqPlot プラグインで作るY軸だけズームできる縦棒グラフ

  jQueryのjqPlotプラグインで作る縦棒グラフにおいて、マウスカーソル（マウスポインタ）で選択した範囲のY軸だけ、ズーム（拡大）できるようにする方法。