資訊專欄INFORMATION COLUMN
摘要：使其作為元素的子節(jié)點(diǎn)關(guān)于路徑中的的屬性的橢圓弧曲線目的是為了繪制餅狀圖參數(shù)一共有個參數(shù)，以下按照順序依次解釋此時有一個起始位置，一個終止位置，一個軸，一個軸大弧小弧的問題是使用較長的弧線，還是較短的弧線。
SVG繪制餅狀圖
昨天學(xué)習(xí)了基本的SVG，下面是使用SVG繪制餅狀圖
創(chuàng)建SVG
需要一個document.createElementNS()方法 一個一個setAttribute()方法
編寫如下js，將會創(chuàng)建一個svg空間
// 創(chuàng)建一個XML命名空間
var svgns = "http://www.w3.org/2000/svg";
// 創(chuàng)建一個SVG元素指定大小和坐標(biāo)
var chart = document.createElementNS(svgns, "svg:svg"); // 創(chuàng)建在svgns命名空間里的svg元素
// 設(shè)置節(jié)點(diǎn)的屬性
chart.setAttribute("width", "100%");
chart.setAttribute("width", "300px");
// 設(shè)置視口大小
chart.setAttribute("viewBox", "0 0 100% 300px");
關(guān)于document.createElementNS 和 document.getElement的區(qū)別 以及命名空間
命名空間
解決的問題：由于僅僅只有三個字母帶來的版本的混亂等等問題。
使用命名空間可以完整的區(qū)分一些不同。一些版本上帶來的不同
一個是xml一個是html
一個屬于操作xml的內(nèi)容，一個屬于操作html的內(nèi)容。
document.createElementNS("p","edition");
創(chuàng)建了一個在p命名空間下的edition節(jié)點(diǎn)。
使其作為body元素的子節(jié)點(diǎn)
var e = document.createElementNS("p","edition");
var body = document.getElementsByTagName("body");
body.appendChild(e);
關(guān)于路徑path
SVG中的path的d屬性的橢圓弧曲線
目的是為了繪制餅狀圖參數(shù)
一共有7個參數(shù)，以下按照順序依次解釋
rx ry此時有一個起始位置，一個終止位置，一個x軸，一個y軸大弧小弧的問題
是使用較長的弧線，還是較短的弧線。
一直以為是兩個弧線相切暈sweep-flag
順時針，還是逆時針，即選擇弧線，以后順時針旋轉(zhuǎn)還是逆時針旋轉(zhuǎn)。
計(jì)算弧度有如下數(shù)據(jù)
| 項(xiàng)目 | 百分比 |
|---|---|
| A | 20% |
| B | 40% |
| C | 10% |
| D | 30% |
分為四項(xiàng)，然后計(jì)算
如果數(shù)據(jù)為原始的楔，可以計(jì)算出相應(yīng)的百分比，復(fù)習(xí)一下弧度 全部忘光了， 一個完整的圓的弧度為2π，半個圓為π。
計(jì)算各自需要的弧度。
20% * 2π 即可得出當(dāng)前的弧度，依次運(yùn)算出弧度即可
分別計(jì)算如下
| 項(xiàng)目 | 弧度數(shù) |
|---|---|
| A | 0.4π |
| B | 0.8π |
| C | 0.2π |
| D | 0.6π |
x使用sin y使用cos
計(jì)算分別的x和y,由于已經(jīng)擁有r需要確認(rèn)起點(diǎn)
其中r為10，需要加上圓心坐標(biāo)（20,20）
| 項(xiàng)目 | x | y |
|---|---|---|
| A | 20 | 20-10=10 |
這里需要注意坐標(biāo)系的不同
此時
如圖
至于為什么要用sin和cos，是由于以12點(diǎn)鐘方向?yàn)闇?zhǔn)的。如果以極坐標(biāo)為準(zhǔn)，即x軸正方向?yàn)闇?zhǔn)的，如下
接著計(jì)算結(jié)束坐標(biāo)
同樣的帶入計(jì)算
| 項(xiàng)目 | x | y |
|---|---|---|
| A | 29 | 16 |
結(jié)束
加Z
設(shè)置畫筆寬度，填充顏色，線條顏色
stroke="#7a7a7a" fill="#c9d6d5" stroke-width="1"如圖
完整如下
接著重復(fù)計(jì)算，應(yīng)該是使用js，將其封裝為一個函數(shù)，輸入圓心坐標(biāo)，傳入數(shù)組即可的。
上方最難的在于sin和cos的問題
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98375.html
摘要：渲染能力采用渲染除了對使用，一般來說，更適合繪制圖形元素?cái)?shù)量非常大這一般是由數(shù)據(jù)量大導(dǎo)致的圖表如熱力圖地理坐標(biāo)系或平行坐標(biāo)系上的大規(guī)模線圖或散點(diǎn)圖等，也利于實(shí)現(xiàn)某些視覺特效如交通圖。 一．簡介 echartsecharts是百度公司前端開發(fā)的一個圖表庫，2013年發(fā)布第一版，主要采用canvas畫圖，目前版本3.8.4；完全免費(fèi)； highcharthighcharts是國外的一家公司...
摘要：貝塞爾曲線方法可以繪制一種類似的曲線。不同的是貝塞爾曲線需要兩個控制點(diǎn)而不是一個，線段的每一個端點(diǎn)都需要一個控制點(diǎn)。下面是描述貝塞爾曲線的簡單示例。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項(xiàng)目原文：Drawing on Canvas 譯者：飛龍 協(xié)議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分參考了《JavaScript 編程精解（第 2...
摘要：但如果數(shù)據(jù)可視化做的較弱，反而會帶來負(fù)面效果錯誤的表達(dá)往往會損害數(shù)據(jù)的傳播，完全曲解和誤導(dǎo)用戶，所以更需要我們多維的展現(xiàn)數(shù)據(jù)，就不僅僅是單一層面，目前有多種第三方庫來實(shí)現(xiàn)數(shù)據(jù)的可視化等。數(shù)據(jù)可視化的具體實(shí)現(xiàn)這里基于兩種實(shí)現(xiàn)方式，一種一種。 數(shù)據(jù)可視化的目的其實(shí)就是直觀地展現(xiàn)數(shù)據(jù)，例如讓花費(fèi)數(shù)小時甚至更久才能歸納的數(shù)據(jù)量，轉(zhuǎn)化成一眼就能讀懂的指標(biāo)；通過加減乘除、各類公式權(quán)衡計(jì)算得到的兩組...
摘要：餅狀圖將數(shù)據(jù)用切割成份的圓來展示。至于半徑，我們用寬度的一半與高度的一半的較小值，因?yàn)槲覀儾幌胱岋灎顖D超出。結(jié)果看起來如下這樣繪制圓環(huán)圖我們已經(jīng)看到如何創(chuàng)建餅狀圖。怎樣畫洞呢我們可以畫一個白色的圓在餅狀圖上。 showImg(https://segmentfault.com/img/bVObDh?w=850&h=362); 原文：https://code.tutsplus.com/zh...
閱讀 2746·2021-11-22 15:22
閱讀 1657·2021-11-22 14:56
閱讀 3634·2021-09-22 15:12
閱讀 2421·2021-09-02 15:41
閱讀 2143·2021-08-27 16:26
閱讀 1129·2019-08-30 15:55
閱讀 2155·2019-08-29 17:30
閱讀 685·2019-08-29 16:26
