简单柱状图

课程目标

学习掌握 Canvas 和 SVG 绘图相关知识，并且能够运用它们绘制一个简单柱状图。

阅读

• Canvas 教程 - Web API 接口参考 | MDN (opens new window)
• Canvas 绘制图片文字视频教程-慕课网 (opens new window)
• HTML5 Canvas Element Tutorial (opens new window)
• SVG | MDN (opens new window)
• JavaScript | MDN (opens new window)

编码

使用 HTML, CSS, JavaScript 实现一个简单的柱状图。

用例描述

• 有横坐标轴线及纵坐标轴线，以及横坐标轴及纵坐标轴的标签文字，不需要有坐标轴刻度线
• 根据输入数据生成柱状图中的柱子

要求

• 可以分别尝试使用 DOM、SVG、Canvas 来实现
• 不使用任何第三方的布局或样式库
• 不使用任何第三方的 JavaScript 库

进阶任务

如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。