Highchart图表动态获取JSON格式数据

页面导航:首页 > 网络编程 > JavaScript > Highchart图表动态获取JSON格式数据

Highchart图表动态获取JSON格式数据

来源: 作者: 时间:2016-02-04 09:15 【

Highchart折线图代码 $(function () { var chartLine = new Highcharts Chart({ chart: { type: 39;line 39;,
Highchart折线图代码
    $(function () {
        var chartLine = new Highcharts.Chart({
            chart: {
                type: 'line',
                renderTo: 'container2'
            },
            title: {
                text: '上月已还款金额与本月账单金额对比结果'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: '单位 (元)'
                }
            },
            tooltip: {
                enabled: false,
                formatter: function () {
                    return '' + this.series.name + '
' + 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) { //为图表设置值 chartLine.series[0].setData(response.data.lastMonth); chartLine.series[1].setData(response.data.thisMonth); chartLine.xAxis[0].setCategories(eval(response.data.categorys)); }).error(function (response) { $log.debug("请求超时或网络故障!获得列表失败!") }); } getFormLine(); });

后端拼JSON代码

   public JSONObject listLastMonthAndThismonthBillsData() {
        JSONObject json =new JSONObject();
        List categorys =new ArrayList();
        List lastMonthData=new ArrayList();
        List thisMonthData=new ArrayList();
        String sql="select lastmonth_repayment,thismonth_bill,period from credit_card_bills order by period asc " ;
        List 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;
    }

HTML代码

    
效果图



Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<