jQuery の jqPlot で作る、ドラッグでX軸方向だけ伸縮できる横棒グラフ

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

jQueryのjqPlotプラグインで作る横棒グラフにおいて、ドラッグで、横棒を、X軸（横）方向だけ、伸縮できるようにする方法。

実装例（サンプル）

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

読み込み

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

<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.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.dragable.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />

読み込むファイル。

JavaScript

<script>
jQuery( function() {
    jQuery . jqplot . config . enablePlugins = true;
    jQuery . jqplot(
        'jqPlot-sample',
        [
            [ [ 65, '4月' ], [ 72, '5月' ], [ 74, '6月' ], [ 63, '7月' ], [ 85, '8月' ], [ 90, '9月' ] ]
        ],
        {
            series:[
                {
                    renderer: jQuery . jqplot . BarRenderer,
                    rendererOptions: {
                        barDirection: 'horizontal'
                    },
                    dragable: {
                        constrainTo: 'x'
                    }
                }
            ],
            axes: {
                yaxis: {
                    renderer: jQuery . jqplot . CategoryAxisRenderer,
                }
            }
        }
    );
} );
</script>
series

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

renderer

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

  • jQuery . jqplot . BarRenderer： 棒グラフ
  • jQuery . jqplot . BubbleRenderer： バブルチャート
  • jQuery . jqplot . BlockRenderer： ブロックチャート
  • jQuery . jqplot . MekkoRenderer： マリメッコ・チャート
  • jQuery . jqplot . BezierCurveRenderer： ベジェ曲線グラフ
  • jQuery . jqplot . PieRenderer： 円グラフ
  • jQuery . jqplot . DonutRenderer： ドーナツグラフ
  • jQuery . jqplot . MeterGaugeRenderer： メーターゲージ
rendererOptions

系列の生成編集オプション。

barDirection

棒グラフの種類。「vertical」か「horizontal」。初期設定値は「vertical 」。

  • vertical： 縦棒（垂直）グラフ
  • horizontal： 横棒（水平）グラフ

dragable

ドラッグ移動に関するオプション。

constrainTo

移動を制限する。

  • none:制限しない
  • x:X軸方向だけ移動可
  • y:Y軸方向だけ移動可
axes

軸に関するオプション。

yaxis

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

renderer

jQuery . jqplot . CategoryAxisRenderer： Y軸をカテゴリとして扱う。

HTML

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

スポンサード リンク

カテゴリー: barRenderer, categoryAxisRenderer, dragable, JavaScript, jqPlot, jQuery, グラフ、チャート, プラグイン, 横棒グラフ パーマリンク