chart.js绘制精美的数据化图形--入门示例

最新推荐文章于 2024-05-21 09:51:56 发布

JoeBlackzqq

最新推荐文章于 2024-05-21 09:51:56 发布

阅读量8.1k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/JoeBlackzqq/article/details/49719277

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

参考：http://think.zvan.com.cn/code/js/2014/0607/247.html

这个库基于html5，在360极速浏览器和firefox中测试通过。

<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="js/chart/Chart.min.js"></script>
	</head>
	<body>
		<canvas id="canvas" height="450" width="600"></canvas>
		<script type="text/javascript">
			var ctx = new Chart(document.getElementById("canvas").getContext("2d"));
			var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};

			// 线型图
			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]
				}]
			};
			var myLineChart = ctx.Line(LineChart, 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>
	</body>
</html>

保证chart.js的文件路径正确！

JoeBlackzqq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
chart.js绘制精美的数据化图形--入门示例

参考：http://think.zvan.com.cn/code/js/2014/0607/247.html 这个库基于html5，在360极速浏览器和firefox中测试通过。 var ctx = new Chart(document.getElementById("canvas").getContext("2d")); var o
复制链接

扫一扫