<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>