最近经常有同学用到js生成各种图表的应用, 这里分别举简单实例来说明下应用, 页底有源代码下载

在应用图片生成前

第一步：先引入 chart.js文件<script type="text/javascript" src="Chart.js"></script>

第二步：<canvas id="myChart" width="400" height="400"></canvas>

    为了创建图表，我们要实例化一个Chart对象

1. 极地区域图表

	var data = [
	{
		value : 30,
		color: "#D97041"
	},
	{
		value : 90,
		color: "#C7604C"
	},
	{
		value : 24,
		color: "#21323D"
	},
	{
		value : 58,
		color: "#9D9B7F"
	},
	{
		value : 82,
		color: "#7D4F6D"
	},
	{
		value : 8,
		color: "#584A5E"
	}
];

var ctx = document.getElementById("myChart").getContext("2d");
		new Chart(ctx).PolarArea(data);

2.  饼图

var data = [

{

value: 30,

color:"#F38630"

},

{

value : 50,

color : "#E0E4CC"

},

{

value : 100,

color : "#69D2E7"

} 

];
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Pie(data);

3. 线性图

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 ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Line(data);

var data = [
	{
		value: 30,
		color:"#F38630"
	},
	{
		value : 50,
		color : "#E0E4CC"
	},
	{
		value : 100,
		color : "#69D2E7"
	}			
];

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Doughnut(data);

var data = {
	labels : ["一月","二月","三月","四月","五月","六月","七月"],
	datasets : [
		{
			fillColor : "rgba(220,220,220,0.5)",
			strokeColor : "rgba(220,220,220,1)",
			data : [65,59,90,81,56,55,40]
		},
		{
			fillColor : "rgba(151,187,205,0.5)",
			strokeColor : "rgba(151,187,205,1)",
			data : [28,48,40,19,96,27,100]
		}
	]
}
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Bar(data);

6.  雷达图

var data = {
	labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
	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 ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Radar(data);

chart插件应用实例下载