HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jqPlot 棒グラフ 簡単サンプル

jqPlot の棒グラフを作成する簡単なサンプルです。

系列別にデータを配列にセットして jqPlot へ渡すだけでグラフを描画してくれます。

このサンプルでは、集合縦棒と積み上げ縦棒の2種類の棒グラフに系列ごとの色の指定、またマウスのイベントに応じた処理を実装してみました。

マウスでクリックされた系列のデータを掘り下げてドリルダウン表示などいろいろ応用ができそうです。

詳細: 棒グラフをクリックすると詳細データを表示します。
詳細: 棒グラフをクリックすると詳細データを表示します。

コード


$(document).ready(function(){
    var ticks = ['5月', '6月', '7月', '8月'];
    var s1 = [2, 6, 7, 10];     // 系列1
    var s2 = [7, 5, 3, 2];      // 系列2
    var s3 = [14, 9, 3, 8];     // 系列3

    plot1 = $.jqplot('chart1', [s1, s2, s3], {
      stackSeries: false,                               // 集合縦棒
      captureRightClick: false,                         // 右クリックのキャプチャ
      seriesColors:['#3366FF', '#FF9900', '#FF99CC'],   // 系列色
      seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {
                barWidth: 20,
                highlightMouseDown: true
            },
        },
        series:[
            {label:'系列1'},
            {label:'系列2'},
            {label:'系列3'}
        ],
        legend: {
            show: true,
            location: 'ne'
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks,
                label: "月"
            },
            yaxis: {
                tickOptions: {formatString: '%d'},
                label: "数量"
            }
        }
    });
    // マウスのクリックをバインド
    $('#chart1').bind('jqplotDataClick', 
        function (ev, seriesIndex, pointIndex, data) {
            $('#info1').html('系列: '+seriesIndex+', ポイント: '+pointIndex+', データ: '+data[1]);
        }
    ); 

    plot2 = $.jqplot('chart2', [s1, s2, s3], {
      stackSeries: true,                                // 積み上げ縦棒
      captureRightClick: false,                         // 右クリックのキャプチャ
      seriesColors:['#3366FF', '#FF9900', '#FF99CC'],   // 系列色
      seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {
                barWidth: 40,
                highlightMouseDown: true
            },
        },
        series:[
            {label:'系列1'},
            {label:'系列2'},
            {label:'系列3'}
        ],
        legend: {
            show: true,
            location: 'ne'
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks,
                label: "月"
            },
            yaxis: {
                tickOptions: {formatString: '%d'},
                label: "数量"
            }
        }
    });
    // マウスのクリックをバインド
    $('#chart2').bind('jqplotDataClick', 
        function (ev, seriesIndex, pointIndex, data) {
            $('#info2').html('系列: '+seriesIndex+', ポイント: '+pointIndex+', データ: '+data[1]);
        }
    ); 

    // 特定のX軸のラベルの色を変える
    $('.jqplot-xaxis-tick').each(function(idx, elem){
        var label = $(elem).text();
        if (label) {
            if(label == '7月') {
                $(elem).css({color: '#ff0000'});
            }
        }
    });
});
	

HTMLコード


<style>
	table td {
		text-align: center;
	}

	#info1, #info2 {
		font-size: 0.8em;
	}
	
	#char1, #chart2 {
		width: 400px;
		height: 400px;
	}
	

</style>

<table>
    <tr>
        <td>
            <div><span>詳細: </span><span id="info1">棒グラフをクリックすると詳細データを表示します。</span></div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="chart1"/>
        </td>
    </tr>
    <tr>
        <td>
            <div><span>詳細: </span><span id="info2">棒グラフをクリックすると詳細データを表示します。</span></div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="chart2"/>
        </td>
    </tr>
</table>