jqplot.canvasOverlay.js

jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.canvasOverlay.js」もしくは「jqplot.canvasOverlay.min.js」は、グラフに線を描き加えたい際に読み込む必要があるjavascriptファイルだ。

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

導入

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

読み込み

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

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

実装例（サンプル）

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

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

オプション

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

canvasOverlay

グラフに描き加える線に関するオプション。

show

グラフに線を描き加えるか。「true」は表示。「false」は非表示。初期設定値は「false」。

objects

描き加える線の種類ごとに、配列で指定。

line

直線。

name

このオーバーレイオブジェクトのオプション名。

lineWidth

直線の太さ。

color

直線の色。

shadow

直線の影を表示するか。「true」は表示。「false」は非表示。

lineCap

直線の端の形。

• round：円形
• butt：四角形
• square：四角形

start

直線の始点。[ Xの値, Yの値 ]のように、配列で指定。

stop

直線の終点。[ Xの値, Yの値 ]のように、配列で指定。

horizontalLine

水平の実線。

name

このオーバーレイオブジェクトのオプション名。

線に後から手を加えたいときなどに使う。

y

水平の実線を描き加えるYの値。

lineWidth

水平の実線の太さ。

color

水平の実線の色。

shadow

水平の実線の影を表示するか。「true」は表示。「false」は非表示。

lineCap

水平の実線の端の形。

• round：円形
• butt：四角形
• square：四角形

xOffset

水平方向のオフセット値。

xmin

描き加える水平線の最小のXの値。

xmax

描き加える水平線の最大のXの値。

dashedHorizontalLine

水平の破線。

name

このオーバーレイオブジェクトのオプション名。

線に後から手を加えたいときなどに使う。

y

水平の破線を描き加えるYの値。

lineWidth

水平の破線の太さ。

color

水平の破線の色。

shadow

水平の破線の影を表示するか。「true」は表示。「false」は非表示。

lineCap

水平の破線の端の形。

• round：円形
• butt：四角形
• square：四角形

xOffset

水平方向のオフセット値。

xmin

描き加える水平の破線の最小のXの値。

xmax

描き加える水平の破線の最大のXの値。

dashPattern

破線のパターン。[ 破線の長さ, 破線の間隔 ]のように、「破線の長さ」と「破線の間隔（次の破線までの距離）」を、交互に配列で指定。

verticalLine

垂直の実線。

name

このオーバーレイオブジェクトのオプション名。

線に後から手を加えたいときなどに使う。

x

垂直の実線を描き加えるXの値。

lineWidth

垂直の実線の太さ。

color

垂直の実線の色。

shadow

垂直の実線の影を表示するか。「true」は表示。「false」は非表示。

lineCap

水平の破線の端の形。

• round：円形
• butt：四角形
• square：四角形

ymin

描き加える垂直の実線の最小のYの値。

ymax

描き加える垂直の実線の最大のYの値。

dashedVerticalLine

垂直の破線。

name

このオーバーレイオブジェクトのオプション名。

線に後から手を加えたいときなどに使う。

x

垂直の破線を描き加えるXの値。

lineWidth

垂直の破線の太さ。

color

垂直の破線の色。

shadow

垂直の破線の影を表示するか。「true」は表示。「false」は非表示。

lineCap

水平の破線の端の形。

• round：円形
• butt：四角形
• square：四角形

ymin

描き加える垂直の破線の最小のYの値。

ymax

描き加える垂直の破線の最大のYの値。

dashPattern

破線のパターン。[ 破線の長さ, 破線の間隔 ]のように、「破線の長さ」と「破線の間隔（次の破線までの距離）」を、交互に配列で指定。

実装例（サンプル）一覧

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

• jQuery の jqPlot プラグインで作る負の値を含む散布図

  jQueryのjqPlotプラグインで、負の値を含む散布図（分布図・点グラフ）を作る方法。

• jQuery の jqPlot の折れ線グラフの水平の実線をカスタマイズ

  jQueryのjqPlotプラグインで作る複数系列の折れ線グラフにおいて、指定したYの値に、実線の水平線を描き加え、その水平線をカスタマイズする方法。

• jQuery の jqPlot の折れ線グラフの水平の破線をカスタマイズ

  jQueryのjqPlotプラグインで作る複数系列の折れ線グラフにおいて、指定したYの値に、水平の破線を描き加え、その水平の破線をカスタマイズする方法。

• jQuery の jqPlot の線グラフに加える水平の実線の始点と終点を指定

  jQueryのjqPlotプラグインで作る複数系列の折れ線グラフにおいて、指定したYの値に、水平の実線を描き加え、その水平の実線の始点と終点を、Xの値の最小値と最大値で指定する方法。

• jQuery の jqPlot の線グラフに加える水平の破線の始点と終点を指定

  jQueryのjqPlotプラグインで作る複数系列の折れ線グラフにおいて、指定したYの値に、水平の破線を描き加え、その水平の破線の始点と終点を、Xの値の最小値と最大値で指定する方法。

• jQuery の jqPlot の線グラフに加えた水平線を、ボタン操作で移動

  jQueryのjqPlotプラグインで作る複数系列の折れ線グラフにおいて、指定したYの値に、実線と破線の水平線を描き加え、その水平線をボタン操作で移動させる方法。

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

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

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

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

• jQuery の jqPlot で作る負の値を含む散布図に、斜めの直線を加える

  jQueryのjqPlotプラグインで作る負の値を含む散布図（分布図・点グラフ）に、斜めの直線を描き加える方法。