SVG绘制饼状图

KoreyLee 发布于2019-08-23 12:21 / 1413人阅读

摘要：使其作为元素的子节点关于路径中的的属性的椭圆弧曲线目的是为了绘制饼状图参数一共有个参数，以下按照顺序依次解释此时有一个起始位置，一个终止位置，一个轴，一个轴大弧小弧的问题是使用较长的弧线，还是较短的弧线。

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

此时有一个起始位置，一个终止位置，一个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

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

此时

如图

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

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

项目	x	y
A	29	16

结束
加Z

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

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

如图

完整如下

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

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

服务器托管私有云饼状图 mpandroidchart饼状图饼状图代码 python 饼状图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98375.html

echarts 与 highcharts

摘要：渲染能力采用渲染除了对使用，一般来说，更适合绘制图形元素数量非常大这一般是由数据量大导致的图表如热力图地理坐标系或平行坐标系上的大规模线图或散点图等，也利于实现某些视觉特效如交通图。一．简介 echartsecharts是百度公司前端开发的一个图表库，2013年发布第一版，主要采用canvas画图，目前版本3.8.4；完全免费； highcharthighcharts是国外的一家公司...

王笑朝 2019-08-22 17:35 评论0 收藏0
JavaScript 编程精解中文第三版十七、在画布上绘图

摘要：贝塞尔曲线方法可以绘制一种类似的曲线。不同的是贝塞尔曲线需要两个控制点而不是一个，线段的每一个端点都需要一个控制点。下面是描述贝塞尔曲线的简单示例。来源：ApacheCN『JavaScript 编程精解中文第三版』翻译项目原文：Drawing on Canvas 译者：飞龙协议：CC BY-NC-SA 4.0 自豪地采用谷歌翻译部分参考了《JavaScript 编程精解（第 2...

habren 2019-08-23 18:19 评论0 收藏0
数据可视化实践

摘要：但如果数据可视化做的较弱，反而会带来负面效果错误的表达往往会损害数据的传播，完全曲解和误导用户，所以更需要我们多维的展现数据，就不仅仅是单一层面，目前有多种第三方库来实现数据的可视化等。数据可视化的具体实现这里基于两种实现方式，一种一种。数据可视化的目的其实就是直观地展现数据，例如让花费数小时甚至更久才能归纳的数据量，转化成一眼就能读懂的指标；通过加减乘除、各类公式权衡计算得到的两组...

PrototypeZ 2019-08-23 13:40 评论0 收藏0
怎样用JavaScript和HTML5 Canvas绘制图表

摘要：饼状图将数据用切割成份的圆来展示。至于半径，我们用宽度的一半与高度的一半的较小值，因为我们不想让饼状图超出。结果看起来如下这样绘制圆环图我们已经看到如何创建饼状图。怎样画洞呢我们可以画一个白色的圆在饼状图上。 showImg(https://segmentfault.com/img/bVObDh?w=850&h=362); 原文：https://code.tutsplus.com/zh...

doodlewind 2019-08-21 15:50 评论0 收藏0