Highcharts使用json显示带占比和数量的柱状图
/** * Created by on 14-3-8. */ var ShowAjaxDate = { init: function(lastBuyDate) { this.lastBuyDate = lastBuyDate; this.get(); }, userGroup: function(userGroupId) { if(userGroupId==1) { return "新用户"; } else { return "回头客"; } }, get: function() { var _this = this; var param = { lastBuyDate:_this.lastBuyDate, callback: 'ShowAjaxDate.setAjaxDate' }; $.ajax({ url: '/manage/getProportionOfNewOldUsers.jsonp', data: param, dataType: 'script', success: function(r) { } }); }, setAjaxDate: function(r) { var options = { chart: { renderTo: 'container', type: 'column' }, title: { text: '新老用户占比' }, exporting:{ enabled:false }, credits: { enabled: false }, xAxis: { categories: ['用户数','贡献次数', '贡献订单行', '贡献金额'] }, yAxis: { min: 0, title: { text: '占比分析' } }, tooltip: { formatter: function() { var str= this.series.name +': '+this.key+':'; if(this.key=='用户数') { str+=this.y+'个'; } if(this.key=='贡献次数') { str+=this.y+'次'; } if(this.key=='贡献订单行') { str+=this.y+'行'; } if(this.key=='贡献金额') { str+=Highcharts.numberFormat(this.y, 2)+'元'; } str+=' (占'+ Highcharts.numberFormat(this.percentage, 2) +'%)'; return str; } }, plotOptions: { column: { stacking: 'percent' } }, series: [] }; for(i=0;i< r.listProportionOfNewUsers.length;i++) { options.series.push({name:ShowAjaxDate.userGroup(r.listProportionOfNewUsers[i].isNew),data:[r.listProportionOfNewUsers[i].userCount,r.listProportionOfNewUsers[i].buyNum,r.listProportionOfNewUsers[i].buyProductNum,r.listProportionOfNewUsers[i].amount]}) } var chart = new Highcharts.Chart(options); } }; $(function () { ShowAjaxDate.init(""); });
json数据格式如下:
ShowAjaxDate.setAjaxDate({"listProportionOfNewUsers":[{"id":15,"lastBuyDate":1392652800000,"amount":120.00,"buyNum":3,"userCount":1,"buyProductNum":6,"isNew":0},{"id":16,"lastBuyDate":1392652800000,"amount":1244.70,"buyNum":10,"userCount":8,"buyProductNum":18,"isNew":1}]});