SVG繪制餅狀圖

KoreyLee 發布于2019-08-23 12:21 / 1592人閱讀

摘要：使其作為元素的子節點關于路徑中的的屬性的橢圓弧曲線目的是為了繪制餅狀圖參數一共有個參數，以下按照順序依次解釋此時有一個起始位置，一個終止位置，一個軸，一個軸大弧小弧的問題是使用較長的弧線，還是較短的弧線。

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

GPU云服務器云服務器餅狀圖 mpandroidchart餅狀圖餅狀圖代碼 python 餅狀圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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