现在的位置: 首页 > 综合 > 正文

使用HTML5 SVG绘制的多层饼形图(纯javascript)

2018年02月14日 ⁄ 综合 ⁄ 共 1086字 ⁄ 字号 评论关闭

代码实在是太繁琐,所以这里先贴出效果图

多层饼图效果5

下载:点击打开链接

增加文字曲线路径

饼形图扇区多行文字行间距自定义

多层饼图效果4

下载点击打开链接


label与所在饼图同角度旋转(可设置)

label可分行,改变字体,颜色(可设置)

不同的字体大小,颜色(可设置)

文字可以多行,不同间距(可设置)

饼形图文字随角度旋转(可设置)

不同级别的饼形图半径(可设置)

根据填充数字填充的饼形图区域(可设置)

效果3点击打开链接

效果2:点击打开链接

饼形图起始角度(设置)("angleArray":"0,0,0,5.65,5.65,5.65", // 表示每一层饼形图绘制的起始角度(弧度))

不同的边框宽度,颜色(设置)

效果图一

多层饼形图效果图1

不同的字体大小,颜色(可设置)

文字可以多行,不同间距(可设置)

饼形图文字随角度旋转(可设置)

不同级别的饼形图半径(可设置)

根据填充数字填充的饼形图区域(可设置)

扩展:

chart

 "bgcolor": "000000", 设置饼形图所在矩形框的背景颜色
 "bgAlpha": "100", 设置饼形图背景颜色的通透度

sizeArray,该属性表示每一层圆的直径,比如"sizeArray":"0,120,160,400"

"angleArray":"0,0,0,5.65,5.65,5.65", // 表示每一层饼形图绘制的起始角度(弧度),如果没有这一行代码,则绘制会从0度开始绘制,总是比sizeArray少一个成员

category

"label": "SPEED<>font-size:8px;fill:#ffffff<br />面包<>font-size:10px;fill:#ffffff<br />96<>font-size:34px;fill:#ffffff<br />GRADING<>font-size:8px;fill:#ffffff<br />评分<>font-size:8px;fill:#ffffff",

对lable的文字style进行了扩充,可以设置label的文字大小、颜色;<br/>可以使文字多行显示

"rotate": "1",表示文字是否随所指区域产生旋转效果,如果为0,则所有的文字水平显示

"borderwidth": "14"所指区域的边框宽度,这个表示整个扇形区域的所有边框,无法单独制定边框的宽度

"bordercolor": "#445566", // 独立设置的边框颜色

"score": "0.96",表示扇形区域的填充值,如果整个扇形区域全部填充,则"score": "1",否则指填充半径的96%的区域

这是为了实现上述效果,对原有代码的扩充

抱歉!评论已关闭.