实验目的：1. 熟悉使用canvas绘制图形
2. 熟悉表单组件及按钮相应事件
实验要求：在网页中添加表单组件，要求用户输入统计数据，根据用户数据绘制相应的饼状图和柱状图。
要求对用户输入进行有效性验证；
通过点击按钮绘制饼状图或柱状图；
饼状图和柱状图要有数据标注。
代码展示：
<!DOCTYPE html>
输入数据：
<br>{"条目1": 1, "条目2": 2, "条目3": 3, "条目4": 5}<br>
效果展示:
HTML5作业(四)-----饼状图和柱状图绘制【附源码】
2024-05-09
104
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
该实验旨在熟悉HTML5 Canvas绘制图形和表单交互。用户需输入统计数据，程序将依据数据绘制饼状图和柱状图。要求验证用户输入有效性，点击按钮可切换图表类型，图上需显示数据标注。提供的代码包含一个表单用于输入JSON数据，两个绘制函数（drawPieChart、drawBarChart）用于生成饼状图和柱状图，以及输入验证和颜色生成辅助函数。
输入数据：
<br>{"条目1": 1, "条目2": 2, "条目3": 3, "条目4": 5}<br>
目录
相关文章
|
1天前
|
前端开发
JavaScript
|
2月前
|
移动开发
HTML5
响应式精品资源导航源码html5
一款响应式精品网站推荐导航源码，可以自己修改代码替换图标图片和指向网址。背景图支持自动替换，背景图可以在images中修改,本地双击html即可查看效果
33
2
2
|
2月前
|
搜索推荐
2024微信个人名片在线生成HTML源码
微信个人名片卡片在线生成，这是一款微信个人名片生成网站源码，无第三方接口，本地直接生成可长期使用。
主要用于生成用户个性化的名片页面，包括头像、姓名、联系方式、个人介绍等信息。
在本地浏览器打开即可,源码是html的，也可上传到服务器上。
45
0
0
|
2月前
|
SQL
安全
数据库
|
2月前
Force Yc 第九引导公告页HTML源码
源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面
48
3
4
|
2月前
|
移动开发
HTML5
蓝色炫酷碎粒子HTML5导航源码
蓝色炫酷碎粒子HTML5导航源码，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面
34
1
1
|
2月前
|
2月前
|
2月前
|
数据安全/隐私保护
自定义密码访问单页HTML源码
自定义密码访问单页HTML源码，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面
38
1
1
|
2月前