|
无意间翻到了之前某次考核做的一个环形统计图，今天又捣鼓了一下把它封装成了一个类，可以根据不同的数据切换内容，下面分享一下我的实现思路。
0.效果预览
![]()
基本功能
环形统计图，按每一项数据自动分配比例。
只需简单地更换数据便可以生成新的环形统计图(统计图大小也可以更改)。
点击每一项可以关闭该项，隐藏右侧数据，然后再重新生成。
![]()
1.该示例的完整JS代码pieChart.js
window.onload = function(){
var data1 = [
{"id":"item0","text":"这是第一行","num":10,"color":"#1e90ff","isdraw":1},
{"id":"item1","text":"这是第二行","num":20,"color":"#36cbcb","isdraw":1},
{"id":"item2","text":"这是第三行","num":30,"color":"#2fc25b","isdraw":1},
{"id":"item3","text":"这是第四行","num":40,"color":"#ffd700","isdraw":1},
{"id":"item4","text":"这是第五行","num":50,"color":"#ff3030","isdraw":1},
{"id":"item5","text":"这是第六行","num":60,"color":"#8a2be2","isdraw":1},
];
var apie = new pieChart('这里是标题',data1,150,40);
apie.add_data();
apie.draw();
}
function pieChart(title, data, radius, width){
this.title = title;
this.data = data;
this.width = width;
this.radius = radius;
this.add_data = function(){
var width = 2*radius;
var chart = document.createElement('div');
chart.style.width = width+'px';
var top = document.createElement('div');
top.setAttribute('style','text-align:center;font-weight:bold;width:'+width+'px');
top.innerText = title;
var circle = document.createElement('canvas');
circle.setAttribute('id','circle');
circle.setAttribute('width',width+"px");
circle.setAttribute('height',width+"px");
var list = document.createElement('div');
list.setAttribute('id','list');
var ul = document.createElement('ul');
ul.setAttribute('style','font-family:Simsun;margin:0;padding:0;list-style:none;');
for(var i=0; i |
基本功能
环形统计图，按每一项数据自动分配比例。
只需简单地更换数据便可以生成新的环形统计图(统计图大小也可以更改)。
点击每一项可以关闭该项，隐藏右侧数据，然后再重新生成。
1.该示例的完整JS代码pieChart.js
window.onload = function(){
var data1 = [
{"id":"item0","text":"这是第一行","num":10,"color":"#1e90ff","isdraw":1},
{"id":"item1","text":"这是第二行","num":20,"color":"#36cbcb","isdraw":1},
{"id":"item2","text":"这是第三行","num":30,"color":"#2fc25b","isdraw":1},
{"id":"item3","text":"这是第四行","num":40,"color":"#ffd700","isdraw":1},
{"id":"item4","text":"这是第五行","num":50,"color":"#ff3030","isdraw":1},
{"id":"item5","text":"这是第六行","num":60,"color":"#8a2be2","isdraw":1},
];
var apie = new pieChart('这里是标题',data1,150,40);
apie.add_data();
apie.draw();
}
function pieChart(title, data, radius, width){
this.title = title;
this.data = data;
this.width = width;
this.radius = radius;
this.add_data = function(){
var width = 2*radius;
var chart = document.createElement('div');
chart.style.width = width+'px';
var top = document.createElement('div');
top.setAttribute('style','text-align:center;font-weight:bold;width:'+width+'px');
top.innerText = title;
var circle = document.createElement('canvas');
circle.setAttribute('id','circle');
circle.setAttribute('width',width+"px");
circle.setAttribute('height',width+"px");
var list = document.createElement('div');
list.setAttribute('id','list');
var ul = document.createElement('ul');
ul.setAttribute('style','font-family:Simsun;margin:0;padding:0;list-style:none;');
for(var i=0; i