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

関連記事

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

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

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu

no image

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

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

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

no image

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

no image

画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」

「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ

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

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

「jqPlot」 カスタマイズ

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

no image

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

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

Message

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

*

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

    PAGE TOP ↑