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>
  • このエントリーをはてなブックマークに追加

関連記事

ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j

no image

テキストエリアを自動的にリサイズしてくれる「Autosize」

「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し

Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」

「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン

リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」

「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ

実装方法が選べるツールチップ用プラグイン「Smallipop」

Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします

ページの画像を非同期で読み込んでくれる「Lazy Load」

「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑