最近接了一项工作任务，要用图表对公司数据做一些统计，于是上网查找下有哪些控件可以使用，最后找了一款叫dhtmlxChart的控件，还是挺好用的。先贴一下最后的效果：

 

 

控件html代码：

<div id="chartbox" style="width:550px;height:400px;border:1px solid #c0c0c0;"></div>

 javascript代码：

function doOnLoad() {
			
				myPieChart = new dhtmlXChart({
					view:"pie",
					container:"chartbox",
					value:"#number#",
					labelOffset:-5,
					label:function(obj){
						var sum = myPieChart.sum("#number#");
						var text = Math.round(parseFloat(obj.number)/sum*100)+"%";
						return "<div class='percent' style='border:1px solid "+obj.color+"'>"+text+"</div>";
					},
					color:"#color#",
					pieInnerText:"#number#次",
					legend:{
						width: 105,

						align:"right",
						valign:"middle",
						template:"#logintype#"
					}
				});
				myPieChart.parse(msg,"json");
			}

控件显示原理是通过javascript函数初始化页面中的div元素,显示数据的内容通过加载指定的json变量的值来确定。下面解释一下初始化时主要变量的含义，

view : 确定显示图表的类型,pie 饼状图 bar 柱形图 line折线表

container：页面中需要初始化的div 元素id

value : 指定图表控件需统计数据的json变量中键名称

label ： 计算每个色块显示百分比的方式

color ： 每个色块显示的颜色，对应json变量中键名称

pieInnerText：每个色块中显示的内容

legend：图表中解释每个色块含义的方式

parse ： 图表控件指定解析的json变量名

json变量的格式：

[

{ number:"36", logintype:"电脑", color: "#ee3639" },

{ sales:"47", logintype:"手机APP", color: "#ee9e36" },

{ sales:"55", logintype:"微信公众号", color: "#eeea36" }

]

最后只需要后台服务器传出相应的json变量给页面就行了。

dhtmlxChart控件：