图表统计控件dhtmlxChart的使用

最近接了一项工作任务，要用图表对公司数据做一些统计，于是上网查找下有哪些控件可以使用，最后找了一款叫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控件：