highchart动态生成图形

前台代码

    

<div id= "container2" >

</div>

$(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();

});

后台代码

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;

  }</jsonobject></ double ></ double ></ double ></ double ></string></string>

效果图如下

同类型请参考:  http://www.iteye.com/topic/1130401