本文介绍了如何使用HTML5和JavaScript进行动态图表的创建和定制。通过在`index.html`中添加容器并在`index.js`中编写立即执行函数，实例化图表对象并设置配置，实现了图表的自适应屏幕大小。进一步的定制包括调整图例样式，改变饼图内外半径，更换数据并修改颜色，以满足不同展示需求。这些定制涵盖了图表的布局、视觉效果和数据更新等多个方面。
官网找到类似实例， 适当分析，并且引入到HTML页面中
代码也简单改一下
效果如下
在index.html中添加容器
在index.js中，完成立即执行函数
实例化对象
指定配置，将准备好的代码粘贴过来
把配置给实例对象
让图表跟随屏幕自动的去适应
查看效果
根据需求定制图表
定制图表需求1：
修改图例组件在底部并且居中显示。
每个小图标的宽度和高度修改为 10px
文字大小为12 颜色 rgba(255,255,255,.5)
查看效果
定制需求2：
修改水平居中 垂直居中
修改内圆半径和外圆半径为 ["40%", "60%"]
带有直角坐标系的比如折线图柱状图是 grid修改图形大小，而我们饼形图是通过 radius 修改大小
查看效果
定制需求3：更换数据
legend 中的data可省略（前面已经删除）
series 中的数据
修改下颜色
查看效果
扫一扫
581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
