jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。
目次
- 凡例を表示 [show]
- 凡例の位置 [location, placement]
- 凡例のフォント設定 [fontSize, fontFamily, textColor]
- 凡例のラベル設定 [labels]
凡例を表示
show
デフォルトではfalse表示されません。凡例を表示させる場合は、show: trueを指定。
凡例の位置
location
凡例の位置を東西南北(ewsn)で指定します。 'nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'
placement
凡例の配置をグラフ上('inside')に表示するか、グラフ外('outside')を選択できます。ただし、グラフ外に配置する場合、凡例の大きさ分グラフを縮小するわけではなく、はみ出すかたちになります。
サンプル
<div id="chart2"></div> <script type="text/javascript"> $(document).ready(function(){ data2_1 = [34,78,90,12,45,67,89,23,56] data2_2 = [93,72,14,45,66,87,28,31,59] $option = { legend: { show: true, location: 'se', placement: 'outside', }, } $.jqplot ( 'chart2', [data2_1, data2_2], $option); }); </script>
凡例のフォント設定
fontSize, fontFamily, textColor(フォントサイズ, フォント, フォントの色)はバグなのか効きません。
Legend modification
の改修をするか、もしくはCSSに追加することで変更可能です。
サンプル
.jqplot-table-legend-label { font-size: 30px; font-family: 'Arial' color: #000000 }
凡例のラベル設定
何も指定しない場合は、Series 1, 2, ....と表示されます。
labels
配列でデータ順に合わせて指定します。
'data4_1'用ラベル'label-1'、'data4_2'用ラベル'label-2'
サンプル
<div id="chart4"></div> <script type="text/javascript"> $(document).ready(function(){ data4_1 = [34,78,90,12,45,67,89,23,56] data4_2 = [93,72,14,45,66,87,28,31,59] $option = { legend: { show: true, labels: ['label-1', 'label-2'], }, } $.jqplot ( 'chart4', [data4_1, data4_2], $option); }); </script>
関連記事
-
-
クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」
「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
-
-
レスポンシブ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide
-
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
-
-
レスポンシブにも対応したカレンダーを表示する「Calendario.js」
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready
- PREV
- Pocketボタンの設置
- NEXT
- テーマ 「Responsive」 カスタマイズ