折れ線グラフ

棒グラフ

ドーナツグラフ

円グラフ

何グラフっていうの?

レーダーチャート

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/Chart.min.js"></script>
<script>
    $(window).load(function(){
		var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

		//折れ線グラフ
		var lineChartData = {
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					label: "My First dataset",
					fillColor : "rgba(220,220,220,0.2)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(220,220,220,1)",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				},
				{
					label: "My Second dataset",
					fillColor : "rgba(151,187,205,0.2)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(151,187,205,1)",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				}
			]

		}

		ctx = document.getElementById("ChartDemo01").getContext("2d");
		window.myLine = new Chart(ctx).Line(lineChartData, {
			responsive: true
		});


		//棒グラフ
		var barChartData = {
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,0.8)",
					highlightFill: "rgba(220,220,220,0.75)",
					highlightStroke: "rgba(220,220,220,1)",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				},
				{
					fillColor : "rgba(151,187,205,0.5)",
					strokeColor : "rgba(151,187,205,0.8)",
					highlightFill : "rgba(151,187,205,0.75)",
					highlightStroke : "rgba(151,187,205,1)",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				}
			]

		}
		ctx = document.getElementById("ChartDemo02").getContext("2d");
		window.myBar = new Chart(ctx).Bar(barChartData, {
			responsive : true
		});


		//ドーナツグラフ
		var doughnutData = [
			{
				value: 300,
				color:"#F7464A",
				highlight: "#FF5A5E",
				label: "Red"
			},
			{
				value: 50,
				color: "#46BFBD",
				highlight: "#5AD3D1",
				label: "Green"
			},
			{
				value: 100,
				color: "#FDB45C",
				highlight: "#FFC870",
				label: "Yellow"
			},
			{
				value: 40,
				color: "#949FB1",
				highlight: "#A8B3C5",
				label: "Grey"
			},
			{
				value: 120,
				color: "#4D5360",
				highlight: "#616774",
				label: "Dark Grey"
			}

		];
		ctx = document.getElementById("ChartDemo03").getContext("2d");
		window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});



		//円グラフ
		var pieData = [
			{
				value: 300,
				color:"#F7464A",
				highlight: "#FF5A5E",
				label: "Red"
			},
			{
				value: 50,
				color: "#46BFBD",
				highlight: "#5AD3D1",
				label: "Green"
			},
			{
				value: 100,
				color: "#FDB45C",
				highlight: "#FFC870",
				label: "Yellow"
			},
			{
				value: 40,
				color: "#949FB1",
				highlight: "#A8B3C5",
				label: "Grey"
			},
			{
				value: 120,
				color: "#4D5360",
				highlight: "#616774",
				label: "Dark Grey"
			}

		];
		ctx = document.getElementById("ChartDemo04").getContext("2d");
		window.myPie = new Chart(ctx).Pie(pieData);


		//?グラフ
		var polarData = [
			{
				value: 300,
				color:"#F7464A",
				highlight: "#FF5A5E",
				label: "Red"
			},
			{
				value: 50,
				color: "#46BFBD",
				highlight: "#5AD3D1",
				label: "Green"
			},
			{
				value: 100,
				color: "#FDB45C",
				highlight: "#FFC870",
				label: "Yellow"
			},
			{
				value: 40,
				color: "#949FB1",
				highlight: "#A8B3C5",
				label: "Grey"
			},
			{
				value: 120,
				color: "#4D5360",
				highlight: "#616774",
				label: "Dark Grey"
			}

		];
		ctx = document.getElementById("ChartDemo05").getContext("2d");
		window.myPolarArea = new Chart(ctx).PolarArea(polarData, {
			responsive:true
		});


		//レーダーチャート
		var radarChartData = {
			labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
			datasets: [
				{
					label: "My First dataset",
					fillColor: "rgba(220,220,220,0.2)",
					strokeColor: "rgba(220,220,220,1)",
					pointColor: "rgba(220,220,220,1)",
					pointStrokeColor: "#fff",
					pointHighlightFill: "#fff",
					pointHighlightStroke: "rgba(220,220,220,1)",
					data: [65,59,90,81,56,55,40]
				},
				{
					label: "My Second dataset",
					fillColor: "rgba(151,187,205,0.2)",
					strokeColor: "rgba(151,187,205,1)",
					pointColor: "rgba(151,187,205,1)",
					pointStrokeColor: "#fff",
					pointHighlightFill: "#fff",
					pointHighlightStroke: "rgba(151,187,205,1)",
					data: [28,48,40,19,96,27,100]
				}
			]
		};

		window.myRadar = new Chart(document.getElementById("ChartDemo06").getContext("2d")).Radar(radarChartData, {
			responsive: true
		});
    });
</script>
<div class="Chart-box">
	<p class="title">折れ線グラフ</p>
	<canvas id="ChartDemo01" width="300px" height="300px"></canvas>
</div>
<div class="Chart-box">
	<p class="title">棒グラフ</p>
	<canvas id="ChartDemo02" width="300px" height="300px"></canvas>
</div>
<div class="Chart-box">
	<p class="title">ドーナツグラフ</p>
	<canvas id="ChartDemo03" width="300px" height="300px"></canvas>
</div>
<div class="Chart-box">
	<p class="title">円グラフ</p>
	<canvas id="ChartDemo04" width="300px" height="300px"></canvas>
</div>
<div class="Chart-box">
	<p class="title">何グラフっていうの?</p>
	<canvas id="ChartDemo05" width="300px" height="300px"></canvas>
</div>
<div class="Chart-box">
	<p class="title">レーダーチャート</p>
	<canvas id="ChartDemo06" width="300px" height="300px"></canvas>
</div>

Chartについて

Chartはバラエティー豊富でインタラクティブなグラフを設置できるプラグインです。
グラフ設置ならChartがおすすめです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Peity

    Peity

    SVGを利用して色々なグラフをブラウザ上に描画できる

  • Knob

    Knob

    ついつい回したくなる円グラフを設置できる

  • Flot

    Flot

    とても豊富な機能を備えたグラフ描画プラグイン