/** * @author wsf hightcharts封装调用 */ ; (function (win,$){ $.chartDataCache = {};//图表数据缓存 /** * 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数据 $.chartDataCache[flg] = opt;//缓存数据 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 gpdata = this.groupData(data); opt.x = gpdata[1];//月份 for(var i in gpdata[0]){ var tmpdata = {}; var name = gpdata[0][i]; tmpdata["name"] = name; tmpdata["data"] = []; for(var j in data){ var tdata = data[j]; var _nm = $.trim(tdata.name); var _d = parseFloat(tdata.data);//数据 if(_nm == name){ tmpdata["data"].push(_d); } } opt.d.push(tmpdata); } return opt; }, //js分组 groupData:function(data,groupname){ var ret = []; var tempret = []; var tempret2 = []; var names = {},times={}; for(var i in data){ var tdata = data[i]; var _nm = $.trim(tdata.name); var _time = $.trim(tdata.time).substring(4);//时间 if(!names[_nm]){ tempret.push(_nm); names[_nm] = 1;//标示已经添加过 } if(!times[_time]){ tempret2.push(parseInt(_time,10)+"月"); times[_time] = 1;//标示已经添加过 } } ret.push(tempret); ret.push(tempret2); return ret; }, //创建饼图 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);
相关推荐
web网页图表控件highchart示例
Highchart 是画曲线图、柱形图、饼图及各种复杂图形的JS插件
Use the highcharts foreground frame to draw a graph and display icons at each point of the curve. Effect such as weather forecast chart.
通过合并svg
highchart使用说明,附加demo代码和使用详细过程。实现动态创建、设置图表数据。
本实例源码 Highchart Demo主要讲述了使用Highchart制作图表的用法。 包括一些js配置以及接收数据格式
Highcharts开源的JS图表控件简介:制作图表的纯Js控件,Highcharts v2.2.0主要特性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;对个人用户完全免费;纯JS,无BS支持大部分的图表类型:直线图,曲线图、区域图...
react-native-chart-view一个基于highchart的图表RN组件
本人自己封装的jquery工具类,highChart工具类。用于动态创建highChart图表对象。方便扩展,使用
获取Highcharts图表对象的方法汇总
NULL 博文链接:https://alecrichard009.iteye.com/blog/1239578
highchart
用HighChart控件实现曲线图
node-highcharts, 在使用节点的服务器上,生成客户端图表的示例 过时警告这里演示的初始工作现在已经开始了几年,没有signficant更新。 现在有可能更好的实现这些目标的方法,我强烈建议不要将它的用作基础。 现在...
本实例源码 Highchart Demo主要讲述了使用Highchart制作图表的用法。 包括一些js配置以及接收数据格式
highchart
jquery-validation校验-highchart图表
网页图表开发一直是个难题,本框架就是一套完美的图表开发库,使用js脚本语言开发,在网页中轻松调用就可以显示出漂亮的图表,并有强大的js交互功能。
highchart中文帮助文档