icon [Flotr2]使ってみる (2014/06/19)
HTML5のグラフライブラリ「Flotr2」を使ってみる。


JavaScriptは「flotr2.min.js」を読み込み、表示する要素のあとにグラフ実行スクリプトを記述する。
※データはあらかじめスクリプト等で、多次元配列を生成
※getElementById()にidを指定
※canvasを利用するので、グラフ表示幅、高さを指定

(function function_name(container, horizontal) { var graph = Flotr.draw(container, graph_data, {options});

})(document.getElementById(id));



HTML

<head>	
	<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="flotr2.min.js"></script>
	<style>
		.graph {
			margin: 5px;
			width: 400px;
			height: 200px;
		}
	</style>

	<script>
		var pie_values = [
		{data : [[0, 64800]], label : 'データ1'},
		{data : [[0, 712800]], label : 'データ2'},
		{data : [[0, 447120]], label : 'データ3'},
		{data : [[0, 231594]], label : 'データ4'},
		{data : [[0, 108000]], label : 'データ5'}
		];

		var bars_values = [
		{data : [[5, 32400],[4, 32400]], label : 'データ1'},
		{data : [[6, 237600],[5, 237600],[4, 237600]], label : 'データ2'},
		{data : [[6, 149040],[5, 149040],[4, 149040]], label : 'データ3'},
		{data : [[6, 77198],[5, 77198],[4, 77198]], label : 'データ4'},
		{data : [[5, 54000],[4, 54000]], label : 'データ5'}
		];

	</script>
</head>
<body>

	<div id="values1-graph" class="graph"></div>
	<div id="values2-graph" class="graph"></div>

	<script type="text/javascript" src="graph.js"></script>
</body>

graph.js

(function basic_pie(container) {
    var graph;

    graph = Flotr.draw(
        container,
        company_sales_graph_values,
        {
            HtmlText : false,
            grid : {
                verticalLines : false,
                horizontalLines : false
            },
            xaxis : { showLabels : false },
            yaxis : { showLabels : false },
            pie : {
                show : true, 
                explode : 6
            },
            mouse : { track : true },
            legend : {
                position : 'ne',
                backgroundColor : '#ffffff'
            }
        }
    );
})(document.getElementById("values1-graph"));

(function bars_stacked(container, horizontal) {
  var graph, i;

  graph = Flotr.draw(
    container,
    month_sales_graph_values,
    {
        legend : {
            backgroundColor : '#D2E8FF' // Light blue 
        },
    bars : {
        show : true,
        stacked : true,
        horizontal : horizontal,
        barWidth : 0.6,
        lineWidth : 1,
        shadowSize : 0
    },
    xaxis : {
        noTicks : 12,
        tickFormatter : function (n) {
            n = Math.round(n);
            return n + '月';
        },
        min: 1,
        max: 12 
    },
    mouse : { track : true },
    grid : {
      verticalLines : horizontal,
      horizontalLines : !horizontal
    },
    legend : {
        position : 'ne',
        backgroundColor : '#ffffff'
    }
  });
})(document.getElementById("values2-graph"));

グラフ種類

  • lines

  • bars

  • candles

  • pies

  • bubbles

  • radar