jQuery の jqPlot の横棒グラフに垂直の破線を描き加える

投稿日: 2012年3月9日 作成者: 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.canvasOverlay.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />

読み込むファイル。

JavaScript

<script>
jQuery( function() {
    jQuery . jqplot(
        'jqPlot-sample',
        [
            [ [ 65, '4月' ], [ 72, '5月' ], [ 74, '6月' ], [ 63, '7月' ], [ 85, '8月' ], [ 90, '9月' ] ]
        ],
        {
            axes: {
                xaxis: {
                    ticks: [ 0, 30, 50, 70, 100 ]
                },
                yaxis: {
                    renderer: jQuery . jqplot . CategoryAxisRenderer,
                }
            },
            seriesDefaults: {
                renderer: jQuery . jqplot . BarRenderer,
                rendererOptions: {
                    barDirection: 'horizontal'
                }
            },
            canvasOverlay: {
                show: true,
                objects: [
                    {
                        dashedVerticalLine: {
                            x: 30,
                            lineWidth: 2,
                            color: 'red',
                            lineCap: 'round',
                            shadow: false,
                            ymin: 0,
                            ymax: 6.5,
                            dashPattern: [ 9, 6, 3, 6 ]
                        }
                    },
                    {
                        dashedVerticalLine: {
                            x: 70,
                            lineWidth: 1,
                            color: 'blue',
                            shadow: false,
                            ymin: 0,
                            ymax: 6.5,
                            dashPattern: [ 1, 2 ]
                        }
                    }
                ]
            }
        }
    );
} );
</script>
axes

軸に関するオプション。

xaxis

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

ticks

X軸上の目盛りを指定。

指定しない場合は、自動的に計算する。

yaxis

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

renderer

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

seriesDefaults

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

renderer

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

rendererOptions

画像生成編集オプション。

barDirection

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


canvasOverlay

グラフに描き加える線に関するオプション。

show

グラフに線を描き加えるか。「true」は表示。「false」は非表示。初期設定値は「false」。

objects

描き加える線の種類ごとに、配列で指定。

dashedVerticalLine

垂直の破線。

x

垂直の破線を描き加えるXの値。

lineWidth

垂直の破線の太さ。

color

垂直の破線の色。

shadow

垂直の破線の影を表示するか。「true」は表示。「false」は非表示。

lineCap

水平の破線の端の形。

  • round：円形
  • butt：四角形
  • square：四角形

ymin

描き加える垂直線の最小のXの値。

ymax

描き加える垂直線の最大のXの値。

dashPattern

破線のパターン。[ 破線の長さ, 破線の間隔 ]のように、「破線の長さ」と「破線の間隔（次の破線までの距離）」を、交互に配列で指定。

HTML

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

スポンサード リンク

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