简易js图表
<html><head>
<meta charset="utf-8">
<script>
$=function(b){return document.getElementById(b)};
var 序列={
初始化:function(我的配置){
var 配置={
标题:'我的标题',
画布id:0,
颜色:['red','blue','grey','gold'],
柱子间隔:20,
};
for(var i in 我的配置){
配置[i]=我的配置[i];
};
var 场景=$(配置.画布id).getContext("2d");
场景.canvas.width=700;
场景.canvas.height=450;
var 数据=[];
var 标签=[];
var s=this;
for(var i in s){
if(typeof s[i]!='function'){
标签.push(i);
数据.push(s[i]);
}
};
return {标签,数据,场景,配置};
},
柱状图:function(我的配置){
with(this.初始化(我的配置)){
var 最大值=Math.max.apply({},数据);
var 图高=场景.canvas.height-120;
var len=数据.length;
var x = 0;
var y = 场景.canvas.height-50;
场景.textAlign = 'center';
场景.fillStyle='black';
场景.font='30px Arial';
场景.fillText(配置.标题, 场景.canvas.width/2, 30);
for(var i=0; i<len; i++){
场景.font='10px Arial';
var 柱子高=数据[i]/最大值*图高;
var 柱子宽=(场景.canvas.width-(len-1)*配置.柱子间隔)/len;
//画柱子:
场景.fillStyle = 配置.颜色[i%配置.颜色.length];
场景.lineWidth = 2;
场景.beginPath();
场景.moveTo(x, y);
场景.lineTo(x, y - 柱子高);
场景.lineTo(x + 柱子宽, y - 柱子高);
场景.lineTo(x + 柱子宽, y);
场景.closePath();
场景.fill();
//画标签和数据:
场景.fillText(标签[i], x+柱子宽/2, y+20, 柱子宽);
场景.fillText(数据[i], x+柱子宽/2, y-柱子高-10, 柱子宽);
x+=柱子宽+配置.柱子间隔;
};
}
},
饼图:function(我的配置){
with(this.初始化(我的配置)){
var len=数据.length;
var x = 场景.canvas.width/2;
var y = 场景.canvas.height/2;
var r = 场景.canvas.height/3;
var 弧度=[0];
var 标签弧度=[];
var sum=0;
for(var i=0;i<数据.length;i++){
sum+=数据[i];
弧度.push(sum);
};
for(var i=1;i<弧度.length;i++){
弧度[i]=弧度[i]/sum*2*Math.PI;
标签弧度.push((弧度[i]+弧度[i-1])/2);
};
场景.textAlign = 'center';
场景.fillStyle='black';
场景.font='30px Arial';
场景.fillText(配置.标题, 场景.canvas.width/2, 30);
for(var i=0; i<len; i++){
场景.font='10px Arial';
//画扇形:
场景.fillStyle = 配置.颜色[i%配置.颜色.length];
场景.lineWidth = 2;
场景.beginPath();
场景.moveTo(x,y);
场景.arc(x,y,r,弧度[i+1],弧度[i],true);
场景.closePath();
场景.fill();
//画标签和数据:
场景.fillText(标签[i], x+(r+15)*Math.cos(标签弧度[i]), y+(r+15)*Math.sin(标签弧度[i]), 20);
};
}
}
}
</script>
</head>
<body>
<canvas id=0></canvas>
<canvas id=1></canvas>
</body>
<script>
//自定义区域
({
亚洲:122,
欧洲:66,
美洲:84,
大洋洲:22,
非洲:69,
南极洲:10,
__proto__:序列,
}).柱状图({标题:'东元集团2018年销售业绩(亿元)',画布id:0});
({
亚洲:122,
欧洲:66,
北美洲:40,
南美洲:44,
大洋洲:22,
非洲:69,
南极洲:10,
__proto__:序列,
}).饼图({标题:'东元集团2018年销售业绩(亿元)',画布id:1});
</script>
</html>
