苗火 Nicholas

[JS]漂亮的chart.js实例——js图表

2017-8-1 萧 写技术

<div style="width:600px; height:450px;">
	<canvas id="canvas"></canvas>
</div>

<script type="text/javascript" src="Chart.min.js"></script>
<script type="text/javascript">
var ctx = new Chart(document.getElementById("canvas").getContext("2d"));
var options = {
	scaleLineColor : "rgba(255,0,0,.1)",
	scaleGridLineColor : "rgba(255,0,0,.05)"
};

// 线型图
var LineChart = {
	labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
	datasets: [{
		fillColor: "rgba(151,249,190,0.5)",
		strokeColor: "rgba(255,255,255,1)",
		pointColor: "rgba(220,220,220,1)",
		pointStrokeColor: "#fff",
		data: [10, 20, 30, 40, 50]
		}, {
		fillColor: "rgba(252,147,65,0.5)",
		strokeColor: "rgba(255,255,255,1)",
		pointColor: "rgba(173,173,173,1)",
		pointStrokeColor: "#fff",
		data: [28, 68, 40, 19, 96]
	}]
};
/*
 * 不同的chart.js版本调用方法是不一样的；
 * 比如现在用的2.6.0就应该是第二种（未屏蔽的）方法;
*/
//var myLineChart = ctx.Line(LineChart, options);
var myLineChart = new Chart(ctx, {
	type:'line',
	data:LineChart,
	options:options
});

// 条形图
var BarChart = {
	labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
	datasets: [{
		fillColor: "rgba(151,249,190,0.5)",
		strokeColor: "rgba(255,255,255,1)",
		data: [13, 20, 30, 40, 50]
		}, {
		fillColor: "rgba(252,147,65,0.5)",
		strokeColor: "rgba(255,255,255,1)",
		data: [28, 68, 40, 19, 96]
	}]
};
//var myBarChart = ctx.Bar(BarChart, options);


// 饼状图
var pieChart = [
		{value: 40, color: "#fcc79c"},
		{value: 30, color: "#beefd2"},
		{value: 90, color: "#ffddfb"},
	];
//var myPieChart = ctx.Pie(pieChart);


// 环状图
var doughnutChart = [
		{value: 60, color: "#fcc79e"},
		{value: 30, color: "#beefd2"},
		{value: 50, color: "#ffddfb"},
		{value: 120, color: "#cdecff"},
		{value: 90, color: "#fff5bc"}
	];
//var myRingChart = ctx.Doughnut(doughnutChart);
</script>

标签: JS