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 Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」
「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を
-
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
ローソク足チャート「jqPlot」
「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、
-
実装方法が選べるツールチップ用プラグイン「Smallipop」
Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
- PREV
- Pocketボタンの設置
- NEXT
- テーマ 「Responsive」 カスタマイズ