HTML5作业(四)-----饼状图和柱状图绘制【附源码】

简介: 该实验旨在熟悉HTML5 Canvas绘制图形和表单交互。用户需输入统计数据,程序将依据数据绘制饼状图和柱状图。要求验证用户输入有效性,点击按钮可切换图表类型,图上需显示数据标注。提供的代码包含一个表单用于输入JSON数据,两个绘制函数(drawPieChart、drawBarChart)用于生成饼状图和柱状图,以及输入验证和颜色生成辅助函数。

实验目的:1. 熟悉使用canvas绘制图形

      2. 熟悉表单组件及按钮相应事件

实验要求:在网页中添加表单组件,要求用户输入统计数据,根据用户数据绘制相应的饼状图和柱状图。

要求对用户输入进行有效性验证;
通过点击按钮绘制饼状图或柱状图;
饼状图和柱状图要有数据标注。

代码展示:

<!DOCTYPE html>










输入数据:

<br>{"条目1": 1, "条目2": 2, "条目3": 3, "条目4": 5}<br>










效果展示:

相关文章
|
15天前
|
定位技术
时尚的联系我们表单HTML模板(源码)
一款时尚的联系我们表单Html模板,带地图和所在位置,输入基本信息和信息发送,看起来很漂亮的联系我们页面。
27 1
时尚的联系我们表单HTML模板(源码)
|
3天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
27 1
|
9天前
|
移动开发 HTML5
HTML5熊猫弹跳手机小游戏源码
一款html5手机端小游戏源码,熊猫跳跃小游戏源码下载。熊猫脚底有弹簧,长按变化力度跳跃,计分游戏,html5手机熊猫也疯狂小游戏源代码。
26 5
|
11天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
24 4
|
12天前
|
移动开发 HTML5
HTML5实现手机端红包下落抢红包特效源码
HTML5实现手机端红包下落抢红包特效源码是一款手机移动端的抢红包小游戏源码下载。红包像下雪一样,点击抓我呀,可以抢红包,需要此款代码的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
29 4
|
10天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
32 0
html5+three.js公路开车小游戏源码
|
18天前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
22 5
|
18天前
轻量级消息弹框HTML源码
轻量级消息弹框插件特效源码是一段不错的消息弹框代码,支持设置通知类型、动画、字体、位置等等属性,可定制程度较高,进行适当扩展等,欢迎对此段代码感兴趣的朋友参考使用。
27 0
轻量级消息弹框HTML源码
|
2月前
|
移动开发 HTML5
响应式精品资源导航源码html5
一款响应式精品网站推荐导航源码,可以自己修改代码替换图标图片和指向网址。背景图支持自动替换,背景图可以在images中修改,本地双击html即可查看效果
38 2
响应式精品资源导航源码html5
|
2月前
|
SQL 安全 数据库
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式