Highcharts使用json柱状图

 

     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}]});