/**
* @author wsf hightcharts封装调用
*/
;
(function (win,$){
/**
* hightchart扩展
*/
function myChart (){
this.colors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];
this.chartType={};
this.title = "";//主标题
this.subtitle = "";//子标题
this.foottitle = "";
this.pointWidth = 50;//图像宽度
this.yAxis = "收入"; //y坐标标题
this.tooltip = "元";
this.legend = {
itemDistance: 50,
borderWidth: 1,
shadow: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF')
};//图例
this.data = [];//数据对象
}
/**
* 原型对象
*/
myChart.prototype = {
constructor:myChart,//构造函数
//生成图表
createChart:function (container,data,flg){
var that = this;
var opt = null;
if(flg&&flg == "muti")
opt = that.parse2xAxisAndChartdataMulti(data);//将数据解析为横坐标和chart数据(多维度)
else
opt = that.parse2xAxisAndChartdata(data);//将数据解析为横坐标和chart数据
container.highcharts({
chart: that.chartType,
title:{
text:that.title,
x:0
},
xAxis:{
categories:opt.x
},
yAxis:{
title : {
text : this.yAxis
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
plotOptions: {
series: {
pointWidth: this.pointWidth
}
},
tooltip:{
valueSuffix:that.tooltip
},
legend:that.legend,
series:opt.d
});
},
//把请求回来的数据解析为横坐标和chart数据
parse2xAxisAndChartdata:function (data){
var opt = {};
opt.x = [];//横坐标
opt.d = [];//chart数据
var _ddata = [];
for(var i in data){
var _nm = $.trim(data[i].name);//名称
var _d = parseFloat(data[i].data);//数据
opt.x.push(_nm);
var td = {color:this.colors[i],y:_d};
_ddata.push(td);
}
opt.d.push({name:this.foottitle,data:_ddata});
return opt;
},
//把请求回来的数据解析为横坐标和chart数据(多维度)
parse2xAxisAndChartdataMulti:function (data){
var opt = {};
opt.x = [];//横坐标
opt.d = [];//chart数据
var _ddata = [];
var tempd1,tempd2,tempd3,tempd4;
for(var i in data){
var tdata = data[i];
var _nm = $.trim(tdata.name);
var _time = $.trim(tdata.time);//时间
var _d = parseFloat(tdata.data);//数据
opt.x.push(_time);
var td = {color:this.colors[i],y:_d};
_ddata.push(td);
tempd1 = {name:"",data:[100,300,20,500,600,800,450,140]};
tempd2 = {name:"",data:[800,100,400,30,500,800,200,10]};
tempd3 = {name:"",data:[400,600,100,300,300,600,100,100]};
}
opt.d.push(tempd1);
opt.d.push(tempd2);
opt.d.push(tempd3);
return opt;
},
//创建饼图
createPieChart:function (container,data,flg){
this.chartType = {
type:"pie"//柱状图
};
this.createChart(container,data,flg);
},
//创建折线图
createLineChart:function (container,data,flg){
this.chartType = {
type:"line"//柱状图
};
this.createChart(container,data,flg);
},
//创建柱状图
createColumnChart:function (container,data,flg){
this.chartType = {
type:"column"//柱状图
};
this.createChart(container,data,flg);
},
//创建柱状图
createBarChart:function (container,data,flg){
this.chartType = {
type:"bar"//柱状图
};
this.createChart(container,data,flg);
}
}
win.myChart = myChart;//外部调用入口
})(window,jQuery);
|