日韩精品欧美激情国产一区_中文无码精品一区二区三区在线_岛国毛片AV在线无码不卡_亞洲歐美日韓精品在線_使劲操好爽好粗视频在线播放_日韩一区欧美二区_八戒八戒网影院在线观看神马_亚洲怡红院在线色网_av无码不卡亚洲电影_国产麻豆媒体MDX

最近經(jīng)常有同學(xué)用到j(luò)s生成各種圖表的應(yīng)用, 這里分別舉簡(jiǎn)單實(shí)例來(lái)說(shuō)明下應(yīng)用, 頁(yè)底有源代碼下載

在應(yīng)用圖片生成前

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

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

    為了創(chuàng)建圖表，我們要實(shí)例化一個(gè)Chart對(duì)象

1. 極地區(qū)域圖表

	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.  雷達(dá)圖

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插件應(yīng)用實(shí)例下載