HTML5中canvas画图之绘制数据图表

最新推荐文章于 2024-05-10 14:30:11 发布

花2不谢

最新推荐文章于 2024-05-10 14:30:11 发布

阅读量5.7k

点赞数 3

分类专栏： HTML5 文章标签： canvas html5 数据

本文链接：https://blog.csdn.net/qq_25821067/article/details/51638488

版权

上一篇博文绘制了一个方格图，现在来绘制一个数据图表。实现的效果如下:

实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数据图表</title>
</head>
<body>
	<canvas id="canvas" width="300" height="300"></canvas>
	<script type="text/javascript">
		//定义图表数据
		var uriage=[80,92,101,110,68,50,45,90,74,68,98,103];
		drawChart(uriage);
		//绘制折线数据图表的函数
		function drawChart(data){
			//获取上下文
			var canvas=document.getElementById("canvas");
			var c

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

花2不谢

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5中canvas画图之绘制数据图表

上一篇博文绘制了一个方格图，现在来绘制一个数据图表。实现的效果如下:实现代码如下: 数据图表 //定义图表数据 var uriage=[80,92,101,110,68,50,45,90,74,68,98,103]; drawChart(uriage); //绘制折线数据图表的函数 function drawChart(data){
复制链接

扫一扫