jQuery の jqPlot プラグインで作る複数系列の凡例付きブロックチャート

投稿日: 2012年4月26日 作成者: alphasis

jQueryのjqPlotプラグインで、複数系列の凡例付きブロックチャートを作る方法。

実装例（サンプル）

実装例（サンプル）の動作について

凡例内の系列ラベル名である「一組」「二組」をクリックすると、その組の系列を、フェードアウトで非表示にする。再度クリックすると、フェードインで表示する。

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<!--[if lt IE 9]>
    <script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
<![endif]-->
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.blockRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />

読み込むファイル。

JavaScript

<script>
jQuery( function() {
    jQuery . jqplot(
        'jqPlot-sample',
        [
            [ [ 61, 65, '太郎' ], [ 68, 74, '花子' ], [ 92, 34, '優斗' ], [ 83, 90, '次郎' ] ],
            [ [ 52, 72, '一郎' ], [ 26, 63, '大翔' ], [ 90, 85, 'さくら' ], [ 62, 56, '結衣' ] ]
        ],
        {
            seriesDefaults: {
                renderer: jQuery . jqplot . BlockRenderer,
            },
            series: [
                { label: '一組' },
                { label: '二組' },
            ],
            axes: {
                xaxis: {
                    min:0,
                    max: 100
                },
                yaxis: {
                    min:0,
                    max: 100
                }
            },
            legend: {
                show: true,
                placement: 'outside',
                location: 'ne',
                renderer: jQuery . jqplot . EnhancedLegendRenderer,
                rendererOptions: {
                    seriesToggle: 'slow'
                }
            }
        }
    );
} );
</script>
seriesDefaults

グラフの種類や、系列の色、太さなど、系列に関する初期設定。

renderer

系列の生成編集に使うプラグインを指定。

series

各系列ごとに指定する系列に関するオプション。１つ目の系列から順に、配列で指定する。

label

系列のラベル。

axes

軸に関するオプション。

xaxis

X軸に関するオプション。

min

X軸上の最小値を指定。

max

X軸上の最大値を指定。

yaxis

Y軸に関するオプション。

min

Y軸上の最小値を指定。

max

Y軸上の最大値を指定。

legend

凡例に関するオプション。

show

凡例を表示するか。「true」は表示。「false」は非表示。初期設定値は、「false」。

placement

凡例を配置する位置。

location

凡例を配置する位置（方角）。

renderer

凡例の生成編集に使うプラグインを指定。

  • jQuery . jqplot . EnhancedLegendRenderer： 凡例の機能を強化する。
rendererOptions

凡例の生成編集に関するオプション。

seriesToggle

凡例内の系列ラベル名をクリックすることで、系列の表示/非表示を切り替えられるようにするか。「true」もしくはフェードスピードを指定すると、切り替えられるようにする。「false」を指定すると、切り替えられないようにする。初期設定値は「normal」。

  • true： 切替有効
  • 'fast'： 早めのフェードスピードで切替
  • 'normal'： 通常のフェードスピードで切替
  • 'slow'： 遅めのフェードスピードで切替
  • ミリ秒
  • false： 切替無効

HTML

<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>

スポンサード リンク

カテゴリー: blockRenderer, enhancedLegendRenderer, JavaScript, jqPlot, jQuery, グラフ、チャート, ブロックチャート, プラグイン パーマリンク