jqplot.pointLabels.js

jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.pointLabels.js」もしくは「jqplot.pointLabels.min.js」は、データポイントラベルを表示させる際に読み込む必要があるjavascriptファイルだ。

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

導入

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

読み込み

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

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

実装例（サンプル）

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

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

オプション

pointLabelsに関するオプション。

seriesDefaults

グラフの種類や、系列の色、太さなど、系列に関する初期設定オプション。

pointLabels

データポイントラベルに関するオプション。

show

データポイントを表示するかどうか。「true」は表示。「false」は非表示。初期設定値は、「false」。

location

データポイントを配置する位置（方角）。

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

xpadding

データポイントとラベルの間の水平方向のパディング。

ypadding

データポイントとラベルの間の垂直方向のパディング。

escapeHTML

データポイントラベルのHTMLをエスケープするか。「true」はエスケープする。「false」はエスケープしない。初期設定値は、「true」。

edgeTolerance

データポイントラベル表示条件となる、軸からの距離。ピクセル単位の数値で指定する。

負の値を指定すると、グリッドの境界から、はみ出すことができるようになる。

formatString

データポイントラベルの形式を指定。

• %d： 整数
• %f： 小数
• %g： データ値
• %s:文字列

hideZeros

値が「0」のデータポイントラベルを表示しないか。「true」は非表示。「false」は表示。初期設定値は、「false」。

series

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

pointLabels

データポイントラベルに関するオプション。

show

データポイントを表示するかどうか。「true」は表示。「false」は非表示。初期設定値は、「false」。

location

データポイントを配置する位置（方角）。

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

xpadding

データポイントとラベルの間の水平方向のパディング。

ypadding

データポイントとラベルの間の垂直方向のパディング。

escapeHTML

データポイントラベルのHTMLをエスケープするか。「true」はエスケープする。「false」はエスケープしない。初期設定値は、「true」。

edgeTolerance

データポイントラベル表示条件となる、軸からの距離。ピクセル単位の数値で指定する。

負の値を指定すると、グリッドの境界から、はみ出すことができるようになる。

formatString

データポイントラベルの形式を指定。

• %d： 整数
• %f： 小数
• %g： データ値
• %s:文字列

hideZeros

値が「0」のデータポイントラベルを表示しないか。「true」は非表示。「false」は表示。初期設定値は、「false」。

実装例（サンプル）一覧

「jqplot.pointLabels.js」もしくは「jqplot.pointLabels.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プラグインで作る折れ線グラフにおいて、データポイントとラベルの間の水平方向のパディングを調整する方法。水平方向のパディングは、seriesDefaultsオプション内のpointLabelsのxpaddingプロパティで調整できる。

• jQuery の jqPlot の折れ線グラフのデータポイントラベルのテキストを調整

  jQueryのjqPlotプラグインで作る折れ線グラフにおいて、「95点」や「￥1,050」のように、データポイントラベルのテキスト形式を調整する方法。

• jQuery の jqPlot で作るHTML形式データポイントラベル付き折れ線グラフ

  jQueryのjqPlotプラグインで作る折れ線グラフにおいて、データポイントラベルの指定に、HTMLを使えるようにする方法。

• jQuery の jqPlot の折れ線グラフのデータポイントラベルを予め指定①

  jQueryのjqPlotプラグインで作る折れ線グラフにおいて、データポイントラベルに、予め指定した文字列を表示させる。系列データに、データポイントラベルを追加する方法。

• jQuery の jqPlot の折れ線グラフのデータポイントラベルを予め指定②

  jQueryのjqPlotプラグインで作る折れ線グラフにおいて、データポイントラベルに、予め指定した文字列を表示させる。seriesオプション内のpointLabelsのlabelsプロパティを使う方法。

• 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プラグインで、ツールチップ風ハイライト表示付き散布図（分布図・点グラフ）を作る方法。