使用AngularJS结合Highchart图表动态获取JSON格式数据

标签：json   highcarts   折线图   angularjs   

Highchart折线图代码

    $(function () {
        var chartLine = new Highcharts.Chart({
            chart: {
                type: 'line',
                <em><span style="color:#ff0000;">renderTo: 'container2'</span></em>
            },
            title: {
                text: '上月已还款金额与本月账单金额对比结果'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: '单位 (元)'
                }
            },
            tooltip: {
                enabled: false,
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br>' + this.x + ': ' + this.y + '°C';
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name: '上月还款金额',
                data: []
            }, {
                name: '本月消费金额',
                data: []
            }]
        });

        function getFormLine() {
            return $http.get("/billsDetail/twoMonthChartData").success(function (response) {
                //为图表设置值
                <strong><span style="color:#ff0000;">chartLine.series[0].setData(response.data.lastMonth);
                chartLine.series[1].setData(response.data.thisMonth);
                chartLine.xAxis[0].setCategories(eval(response.data.categorys));</span></strong>
            }).error(function (response) {
                $log.debug("请求超时或网络故障!获得列表失败!")
            });

        }

        getFormLine();
    });

后端拼JSON代码

   public JSONObject listLastMonthAndThismonthBillsData() {
        JSONObject json =new JSONObject();
        List<String> categorys =new ArrayList<String>();
        List<Double> lastMonthData=new ArrayList<Double>();
        List<Double> thisMonthData=new ArrayList<Double>();
        String sql="select lastmonth_repayment,thismonth_bill,period from credit_card_bills order by period asc " ;
        List<JSONObject> resultdata = billsDetailDao.list(sql);
        for(JSONObject dataItem:resultdata)
        {
            categorys.add(dataItem.getString("period"));
            lastMonthData.add(dataItem.getDouble("lastmonth_repayment"));
            thisMonthData.add(dataItem.getDouble("thismonth_bill"));

        }
        json.put("categorys",categorys);
        json.put("lastMonth",lastMonthData);
        json.put("thisMonth",thisMonthData);
        return json;
    }

    <div  id="container2">
    </div>

使用AngularJS结合Highchart图表动态获取JSON格式数据

标签：json   highcarts   折线图   angularjs   

原文地址：http://blog.csdn.net/yanjun008/article/details/42063423