使用js畫圖之餅圖
更新時(shí)間：2015年01月12日 15:42:57 投稿：hebedich
這篇文章主要介紹了使用js繪制幾何圖形系列教程的繪制餅圖篇,需要的朋友可以參考下
使用js畫圖之餅圖
餅圖是將一個(gè)圓分割為多個(gè)扇形。
樣例：http://www.zhaojz.com.cn/demo/draw8.html
復(fù)制代碼 代碼如下:
//餅圖
//dot 圓點(diǎn)
//r 半徑
//data 數(shù)據(jù)（一維數(shù)組）
function drawPie(dot, r, data){
if(data && data.length > 0){
var accumulationAngleOfSlope = new Number(0); //累計(jì)偏移角度
var total = new Number(0);
var i = 0;
for(;i<data.length;i++){ //計(jì)算data的合計(jì)
total += data[i];
}
for(i = 0;i<data.length;i++){
var angle = new Number(360*data[i]/total).toFixed(3); //將data[i]/total轉(zhuǎn)換為角度
//畫一個(gè)扇形
drawSector(dot, r, new Number(angle), new Number(accumulationAngleOfSlope), true, Number(parseFloat(data[i]/total)*100).toFixed(3)+'%');
accumulationAngleOfSlope = accumulationAngleOfSlope+parseFloat(angle); //累計(jì)偏移角度
}
}
}
您可能感興趣的文章:
- extjs圖形繪制之餅圖實(shí)現(xiàn)方法分析
- JavaScript使用百度ECharts插件繪制餅圖操作示例
- JS+canvas動(dòng)態(tài)繪制餅圖的方法示例
- 讀取數(shù)據(jù)庫(kù)的數(shù)據(jù)并整合成3D餅圖在jsp中顯示詳解
- Javascript highcharts 餅圖顯示數(shù)量和百分比實(shí)例代碼
- html+js+highcharts繪制圓餅圖表的簡(jiǎn)單實(shí)例
- javaScript矢量圖表庫(kù)-gRaphael幾行代碼實(shí)現(xiàn)精美的條形圖/餅圖/點(diǎn)圖/曲線圖
- 輕松使用JSP生成餅圖
- JavaScript 繪制餅圖的示例
相關(guān)文章
javascript捕獲窗口關(guān)閉事件有兩種方法2009-07-07
Bootstrap中datetimepicker使用小結(jié)
這篇文章主要為大家詳細(xì)介紹了Bootstrap中datetimepicker的使用方法，一款功能強(qiáng)大的日期選擇控件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
基數(shù)排序是一種根據(jù)數(shù)字位數(shù)的值,對(duì)整數(shù)進(jìn)行排序的算法,本文主要介紹了JS實(shí)現(xiàn)基數(shù)排序的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
js+數(shù)組實(shí)現(xiàn)網(wǎng)頁(yè)上顯示時(shí)間/星期幾的實(shí)用方法
在網(wǎng)頁(yè)上顯示時(shí)間(年月日/時(shí)分秒),很多新手朋友都想實(shí)現(xiàn)這樣的功能，本文整理了一些實(shí)用技巧，殺出來(lái)與大家分享，感興趣的朋友可以了解下2013-01-01
一個(gè)可以隨意添加多個(gè)序列的tag函數(shù)
由于在沒(méi)有規(guī)劃好的情況下寫的這個(gè)代碼，寫的比較粗糙，也沒(méi)有添加注釋。 JavaScript代碼和HTML完全分離；可以隨意添加多個(gè)子div標(biāo)簽，自動(dòng)擴(kuò)展2009-07-07
這篇文章主要介紹了JS中Select下拉列表類(支持輸入模糊查詢)功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
如何利用JSHint減少JavaScript的錯(cuò)誤
JSHint是一個(gè)社區(qū)驅(qū)動(dòng)用來(lái)檢測(cè)JavaScript代碼中錯(cuò)誤和潛在的問(wèn)題以及執(zhí)行團(tuán)隊(duì)的編碼規(guī)范工具。它非常靈活,因此可以很容易地適應(yīng)您特定的編碼規(guī)則和你的代碼執(zhí)行環(huán)境。JSHint將永遠(yuǎn)保持開(kāi)源的方式。2016-08-08
這篇本文主要給大家介紹了JavaScript era庫(kù)的使用,使用 ora 這個(gè) JavaScript 庫(kù)可以在命令行應(yīng)用程序中提供漂亮的加載狀態(tài)提示,本文詳細(xì)介紹如何使用該庫(kù),并結(jié)合多個(gè)例子演示其功能,需要的朋友可以參考下2024-02-02
JS實(shí)現(xiàn)的tab頁(yè)切換效果完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)的tab頁(yè)切換效果,涉及javascript基于事件響應(yīng)動(dòng)態(tài)操作頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
JavaScript中的偽數(shù)組用法及說(shuō)明
這篇文章主要介紹了JavaScript中的偽數(shù)組用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02