Js/JQuery

【商用利用可】jQueryで出来たグラフ描画する4つの無料プラグイン

2017年12月17日 7:00 AM
グラフを動的に表示するのはJavascriptを使わなければいけないので、難しくはなくても作るのに大変面倒です。そこで、JSでグラフを作る際に便利なJQueryプラグインを紹介しています。

Chart.js

  • MITライセンス
  • 線グラフ、棒グラフ、レーダーチャート、鶏頭図(Polar area chart)、円グラフ、ドーナツグラフを書くことが可能

サンプルコード

var ctx = $("#myChart").get(0).getContext("2d");
var data = {
	labels : ["January","February","March","April","May","June","July"],
	datasets : [
		{
			fillColor : "rgba(220,220,220,0.5)",
			strokeColor : "rgba(220,220,220,1)",
			pointColor : "rgba(220,220,220,1)",
			pointStrokeColor : "#fff",
			data : [65,59,90,81,56,55,40]
		},
		{
			fillColor : "rgba(151,187,205,0.5)",
			strokeColor : "rgba(151,187,205,1)",
			pointColor : "rgba(151,187,205,1)",
			pointStrokeColor : "#fff",
			data : [28,48,40,19,96,27,100]
		}
	]
}
var myNewChart = new Chart(ctx).Line(data,options);

Google Charts

棒グラフ、線グラフ、円グラフから地図を塗り分けた分布図まで作成できる。

サンプルコード

google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }

YUI Charts

  • BSDライセンス
  • YUI(Yahoo!UserInterface)のウィジェット
  • 線グラフ、棒グラフ、円グラフなどスタンダードなものが一通りできる。
  • 実装もシンプルなので、慣れやすい！

サンプルコード

YUI().use('charts', function (Y) {

	// Data for the chart
	var myDataValues = [
	    {category:"5/1/2010", values:2000},
	    {category:"5/2/2010", values:50},
	    {category:"5/3/2010", values:400},
	    {category:"5/4/2010", values:200},
	    {category:"5/5/2010", values:5000}
	];

	// Instantiate and render the chart
	var mychart = new Y.Chart({
	    dataProvider: myDataValues,
	    render: "#mychart"
	});

});

jQPlot

  • グラフ、棒グラフ、円グラフなど。
  • 線GPL&MITライセンス。
  • ドラッグして数値を変えたりできる。
  • 若干解説サンプル例が少なめか

サンプルコード

$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
  axes:{yaxis:{min:-10, max:240}},
  series:[{color:'#5FAB78'}]
});

 

FacebookTwitterPocketHatenaLineOutlook.com