开发者社区> mysoul8021> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

SVG绘制饼状图

简介:
+关注继续查看

SVG绘制饼状图
昨天学习了基本的SVG,下面是使用SVG绘制饼状图

创建SVG空间

创建SVG

需要一个document.createElementNS()方法 一个一个setAttribute()方法

编写如下js,将会创建一个svg空间

    // 创建一个XML命名空间
    var svgns = "http://www.w3.org/2000/svg";

    // 创建一个SVG元素指定大小和坐标
    var chart = document.createElementNS(svgns, "svg:svg");    // 创建在svgns命名空间里的svg元素
    // 设置节点的属性
    chart.setAttribute("width", "100%");
    chart.setAttribute("width", "300px");
    // 设置视口大小
    chart.setAttribute("viewBox", "0 0 100% 300px");

关于document.createElementNS 和 document.getElement的区别 以及命名空间

命名空间

解决的问题:由于仅仅只有三个字母带来的版本的混乱等等问题。
使用命名空间可以完整的区分一些不同。一些版本上带来的不同

关于两者

一个是xml一个是html
一个属于操作xml的内容,一个属于操作html的内容。

举个栗子

document.createElementNS("p","edition");

创建了一个在p命名空间下的edition节点。
使其作为body元素的子节点

var e = document.createElementNS("p","edition");
var body = document.getElementsByTagName("body");
body.appendChild(e);

关于路径path

SVG中的path的d属性的椭圆弧曲线

目的是为了绘制饼状图

参数

一共有7个参数,以下按照顺序依次解释

rx ry

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="
        M20 20
        A6 6 0 1 0 40 20
    "/ stroke="#c9d6d5" fill="none">
</svg>

此时有一个起始位置,一个终止位置,一个x轴,一个y轴

大弧小弧的问题

是使用较长的弧线,还是较短的弧线。

一直以为是两个弧线相切晕

sweep-flag

顺时针,还是逆时针,即选择弧线,以后顺时针旋转还是逆时针旋转。

计算弧度

有如下数据

项目 百分比
A 20%
B 40%
C 10%
D 30%

分为四项,然后计算

如果数据为原始的楔,可以计算出相应的百分比,

复习一下弧度 全部忘光了, 一个完整的圆的弧度为2π,半个圆为π。

计算各自需要的弧度。
20% * 2π 即可得出当前的弧度,依次运算出弧度即可
分别计算如下

项目 弧度数
A 0.4π
B 0.8π
C 0.2π
D 0.6π

计算圆弧的x和y

x使用sin y使用cos
计算分别的x和y,由于已经拥有r需要确认起点
其中r为10,需要加上圆心坐标(20,20)

项目 x y
A 20 20-10=10

这里需要注意坐标系的不同

此时

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="
        M20 20
        L20 10
    "/ stroke="#c9d6d5" fill="none">
</svg>

如图

至于为什么要用sin和cos,是由于以12点钟方向为准的。如果以极坐标为准,即x轴正方向为准的,如下

接着计算结束坐标
同样的带入计算

项目 x y
A 29 16
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="
        M20 20
        L20 10
        A10 10 0 0 1 29 16
    "/ stroke="#c9d6d5" fill="none">
</svg>

结束
加Z

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="
        M20 20
        L20 10
        A10 10 0 0 1 29 16 Z
    "/ stroke="#c9d6d5" fill="none">
</svg>
<script>

设置画笔宽度,填充颜色,线条颜色

stroke="#7a7a7a" fill="#c9d6d5" stroke-width="1"

如图

完整如下

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="
        M20 20
        L20 10
        A10 10 0 0 1 29 16 Z
    "/ stroke="#7a7a7a" fill="#c9d6d5" stroke-width="1">
</svg>

接着重复计算,应该是使用js,将其封装为一个函数,输入圆心坐标,传入数组即可的。

上方最难的在于sin和cos的问题

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SVG 可缩放矢量图形
SVG 可缩放矢量图形
0 0
C#编程-135:Graphics绘制三维饼状图
C#编程-135:Graphics绘制三维饼状图
0 0
H5画布 canvas(二)绘制文字、图片、坐标系,canvas颜色和样式,canvas绘制环境
H5画布 canvas(二)绘制文字、图片、坐标系,canvas颜色和样式,canvas绘制环境
0 0
H5画布 canvas(一)canvas简介、绘制圆形/矩形、案例饼状图绘制
H5画布 canvas(一)canvas简介、绘制圆形/矩形、案例饼状图绘制
0 0
用CSS绘制最常见的40种形状和图形
用CSS绘制最常见的40种形状和图形
0 0
第167天:canvas绘制柱状图
canvas绘制柱状图 1、HTML 1 DOCTYPE html> 2 3 4 5 6 06柱状图面向对象版本 7 8 body { 9 padding: 0; 10 ma...
975 0
第166天:canvas绘制饼状图动画
canvas绘制饼状图动画 1、HTML 1 DOCTYPE html> 2 3 4 5 6 饼状图面向对象版本 7 8 body { 9 padding: 0; 10 ma...
1184 0
使用svgdeveloper 和 svg-edit 绘制svg地图
目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一、SVGDeveloper 5. 方法二、SVG-Edit 1. 描述编辑   有的时候我们需要自定义地图,本文提供基本的基于SVG的矢量图制作教程;   2.
2004 0
+关注
mysoul8021
佛系中
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载