使用HTML5 SVG绘制的多层饼形图（纯javascript）

最新推荐文章于 2024-08-11 13:12:40 发布

娱乐靠球

最新推荐文章于 2024-08-11 13:12:40 发布

阅读量3.3k

点赞数 3

分类专栏：脚本文章标签： javascript SVG HTML5 饼形图

本文链接：https://blog.csdn.net/tiplip/article/details/42711119

版权

脚本专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

QQ：112908676

多层饼图效果5

下载：点击打开链接

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pie_Demo</title>

<script src="fancycharts.js" type="text/javascript"></script>
<script src="pie.js" type="text/javascript"></script>
<style type="text/css">
@font-face {
  font-family: 'DINMittelschrift';
  src: url('DINMittelschrift-Alternate.otf');
}
</style>

<body>
	<div id="chart-container"></div>
</body>
	
	<script type="text/javascript">
        createPieSimple('chart-container', {
            'total': '96',
            'rhythm': '89',
            'speed': '75',
            'volume': '92',
            'sound': '98',
            'stability': '85',
            'typhoon': '74',
            'potential': '92',
            'mold': '89',
            'vivid': '78',
            'structure': '99',
            'style': '85',
            'history': '95',
            'exclusive': '86',
            'essential': '75'
        });
	</script>
</html>

增加文字曲线路径

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

多层饼图效果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 面包<>font-size:10px;fill:#ffffff 96<>font-size:34px;fill:#ffffff GRADING<>font-size:8px;fill:#ffffff 评分<>font-size:8px;fill:#ffffff",

对lable的文字style进行了扩充，可以设置label的文字大小、颜色； 可以使文字多行显示

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

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

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

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

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