组件方式开发 Web App全站-7-图表组件-柱状图组件开发

来源:互联网 发布:z4 知乎 编辑:程序博客网 时间:2024/06/05 08:56

这里写图片描述
这里写图片描述
为了照顾后面的数值不跟随柱形移动。所以柱形是一个div定义宽和高;然后里面一个div添加背景,然后宽度逐渐增加
雷达图
这里写图片描述
底图层:网格背景+伞骨图(核心关键:多边形顶点坐标计算)
1. 计算一个圆周上的坐标(计算多边形的顶点坐标
2. 已知:圆心坐标(a,b),半径 r;角度deg.
3. rad = ( 2*Math.PI / 360) * (360 / 边数) * i(第几个)
4. x = a + Math.sin( rad ) * r;
5. y = b + Math.cos( rad ) * r;
这里写图片描述
饼图
难点1:绘制一段弧线并填充(饼)
难点2:定位数据文本
这里写图片描述

0 0
原创粉丝点击