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プラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

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

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

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

表示パターン豊富なスライダー「flexslider 2」

「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示

親要素の大きさに合わせてテキストをリサイズ「FitText」

「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head

no image

ファイルアップロードフォーム プラグイン

Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h

no image

シンプルな画像スライダー/ギャラリー用プラグイン

スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン

カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト

Message

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

*

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

    PAGE TOP ↑