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的問題