jQuery の jqPlot の折れ線グラフのマーカースタイルを系列ごとに変更

投稿日: 2012年2月11日 作成者: alphasis

jQueryのjqPlotプラグインで作る折れ線グラフのマーカースタイルを系列ごとに変更する方法。

seriesDefaultsオプション、もしくは、seriesオプション内の、markerOptionsのstyleプロパティで、マーカースタイルを指定することができる。系列ごとに個別に指定する場合は、seriesオプション内で指定する。

2012/02/11現在、指定できるスタイルは、diamond、circle、square、x、plus、dash、filledDiamond、filledCircle、filledSquareの9つ。

実装例（サンプル）

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

読み込み

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

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

読み込むファイル。

JavaScript

<script>
jQuery( function() {
    dimaond = [ [ 1, 8031624 ], [ 2, 2942392 ], [ 3, 1166755 ], [ 4, 8811831 ], [ 5, 4323067 ], [ 6, 1718392 ] ];
    circle = [ [ 1, 5919275 ], [ 2, 2228422 ], [ 3, 6369703 ], [ 4, 9916855 ], [ 5, 5181441 ], [ 6, 9623963 ] ];
    square = [ [ 1, 2782943 ], [ 2, 8612849 ], [ 3, 1628417 ], [ 4, 5066818 ], [ 5, 7536765 ], [ 6, 1747767 ] ];
    x = [ [ 1, 4933080 ], [ 2, 9145515 ], [ 3, 3846689 ], [ 4, 1666280 ], [ 5, 1651924 ], [ 6, 7115412 ] ];
    plus = [ [ 1, 4537085 ], [ 2, 8105538 ], [ 3, 5891375 ], [ 4, 3557252 ], [ 5, 1717540 ], [ 6, 2036022 ] ];
    dash = [ [ 1, 4398628 ], [ 2, 7232806 ], [ 3, 6190808 ], [ 4, 3869813 ], [ 5, 4143208 ], [ 6, 2435541 ] ];
    filledDiamond = [ [ 1, 1070277 ], [ 2, 5993508 ], [ 3, 2689140 ], [ 4, 8524618 ], [ 5, 8925250 ], [ 6, 5771878 ] ];
    filledCircle = [ [ 1, 2835084 ], [ 2, 8922498 ], [ 3, 9209279 ], [ 4, 4340377 ], [ 5, 1159130 ], [ 6, 1109549 ] ];
    filledSquare = [ [ 1, 7110959 ], [ 2, 2502557 ], [ 3, 5705699 ], [ 4, 3493375 ], [ 5, 2909283 ], [ 6, 3864097 ] ];
    jQuery . jqplot(
        'jqPlot-sample',
        [
            dimaond, circle, square, x, plus, dash, filledDiamond, filledCircle, filledSquare
        ],
        {
            series:[
                {
                    label: 'dimaond',
                    markerOptions: {
                        style: 'dimaond'
                    }
                },
                {
                    label: 'circle',
                    markerOptions: {
                        style: 'circle'
                    }
                },
                {
                    label: 'square',
                    markerOptions: {
                        style: 'square'
                    }
                },
                {
                    label: 'x',
                    markerOptions: {
                        style: 'x'
                    }
                },
                {
                    label: 'plus',
                    markerOptions: {
                        style: 'plus'
                    }
                },
                {
                    label: 'dash',
                    markerOptions: {
                        style: 'dash'
                    }
                },
                {
                    label: 'filledDiamond',
                    markerOptions: {
                        style: 'filledDiamond'
                    }
                },
                {
                    label: 'filledCircle',
                    markerOptions: {
                        style: 'filledCircle'
                    }
                },
                {
                    label: 'filledSquare',
                    markerOptions: {
                        style: 'filledSquare'
                    }
                }
            ],
            axes: {
                xaxis: {
                    renderer: jQuery . jqplot . CategoryAxisRenderer,
                }
            },
            legend: {
                show: true,
                placement: 'outside',
                location: 'ne',
            }
        }
    );
} );
</script>
series

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

label

系列のラベル。

markerOptions

系列のマーカーに関するオプション。

style

系列のマーカーのスタイル。

2012/02/11現在、指定できるスタイルは、diamond、circle、square、x、plus、dash、filledDiamond、filledCircle、filledSquareの9つ。

初期設定値は、「filledCircle」。

axes

軸に関するオプション。

xaxis

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

renderer

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

legend

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

show

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

placement

凡例を配置する位置。

location

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

HTML

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

スポンサード リンク

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