HARD DAY'S NIGHT別館

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

jqPlot 折れ線グラフ 簡単サンプル

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

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

このサンプルでは、3つの折れ線グラフを表示しています。データがない場合は、nullを設定するとプロットされません。

コード


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

    plot1 = $.jqplot('chart1', [s1, s2, s3], {
      captureRightClick: false,                         // 右クリックのキャプチャ
      seriesColors:['#3366FF', '#FF9900', '#FF99CC'],   // 系列色
      seriesDefaults:{
        rendererOptions: {
                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: "数量"
            }
        }
    });

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

HTMLコード


<div id="chart1"/>