实验目的：1. 熟悉使用canvas绘制图形
2. 熟悉表单组件及按钮相应事件
实验要求：在网页中添加表单组件，要求用户输入统计数据，根据用户数据绘制相应的饼状图和柱状图。
要求对用户输入进行有效性验证；
通过点击按钮绘制饼状图或柱状图；
饼状图和柱状图要有数据标注。
代码展示：
<!DOCTYPE html>
输入数据：
<br>{"条目1": 1, "条目2": 2, "条目3": 3, "条目4": 5}<br>
效果展示:
HTML5作业(四)-----饼状图和柱状图绘制【附源码】
2024-05-09
165
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
该实验旨在熟悉HTML5 Canvas绘制图形和表单交互。用户需输入统计数据，程序将依据数据绘制饼状图和柱状图。要求验证用户输入有效性，点击按钮可切换图表类型，图上需显示数据标注。提供的代码包含一个表单用于输入JSON数据，两个绘制函数（drawPieChart、drawBarChart）用于生成饼状图和柱状图，以及输入验证和颜色生成辅助函数。
输入数据：
<br>{"条目1": 1, "条目2": 2, "条目3": 3, "条目4": 5}<br>
目录
相关文章
|
1天前
|
2天前
|
6天前
|
6天前
|
2天前
|
5天前
|
移动开发
前端开发
HTML5
|
6天前
|
JavaScript
|
25天前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码，为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑，还具备丰富的界面设计和用户交互功能，使得玩家能够轻松上手并享受扫雷带来的乐趣。
68
22
22
|
15天前
|
JavaScript
jQuery+HTML5实现的微信大转盘抽奖源码
这是一款基于jQuery+HTML5实现的微信大转盘抽奖效果源码，是一款可配置奖品抽奖的jQuery大转盘抽奖代码，可实现点击按钮转轮旋转实现抽奖功能，效果逼真自然，代码里面有详细的注释，可以修改文字或者二次开发都可以
33
11
11
|
15天前
|
移动开发
HTML5
HTML5实现的手机验证抽奖领券效果源码
这是一款基于HTML5实现的手机验证抽奖领券效果源码。在输入框输入手机号码即可点击下方的按钮来进行抽奖游戏，中奖后还会弹出提示信息，是一款比较经典的抽奖游戏源码
34
9
9
热门文章
最新文章
1
一个好看的小时钟html+js+css源码
2
HTML在线扫雷游戏网页源码
3
html实现的文字发散动画效果代码
4
在线检测显示屏坏点html工具源码
5
html+js+css实现的建筑方块立体数字时钟源码
6
HTML5 SVG实现可爱的小鸟卡通动画3D特效
7
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
8
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
9
日常答题赢奖励单页HTML源码
10
【Html.js——生成欢迎语】关于你的欢迎语（蓝桥杯真题-1764）【合集】
1
html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
161
2
HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
102
3
好看的html网站维护源码
333
4
html+echars图表加日期检索
74
5
html+echars的统计报表
86
6
【CSDN创作优化1】个人简介优化 html font属性
75
7
一种pug与html相互转换的工具
130
8
android TextView HTML 的效果
58
9
BeautifulSoup 是一个 Python 库，用于从 HTML 和 XML 文件中提取数据
179
10
HTML5/CSS3粒子效果进度条代码
87