hightcharts java的实现实例显示类型bar柱形

hightcharts java的实现实例，亲自尝试过的，希望给大家共享一下，有不明白的，可以问我。

 <div id="container1"></div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
 <script type="text/javascript">

 
var data = [];
 var x = [];//X轴
   var y = [];//Y轴
   var xtext=[];
   var
4000
color = ["gray","pink","red","blue","yellow","green","purple"];
  var chart1 = new Highcharts.Chart({
       chart:{
           renderTo:'container1',
           type:'bar' ,//显示类型 柱形

            events: {

                    load: function () {

                        // set up the updating of the chart each second

                      //  var series = this.series[0];

                        

                    }

                }
       },
       title: {

             text: '金额统计'

         },

         xAxis: {

          //   type: 'datetime',

             categories:xtext

         },

         yAxis: {

             title: {

                 text: '金额（元）'

             },

             labels: {                                                      

                 overflow: 'justify'                                        

             } ,

             min: 0,

             plotLines: [{

                 value: 0,

                 width: 1,

                 color: '#808080'

             }]

         },

         tooltip: {

             headerFormat: '<span style="font-size:10px">{point.key}</span><table>',

             pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +

                 '<td style="padding:0"><b>{point.y:.2f} 元</b></td></tr>',

             footerFormat: '</table>',

             shared: true,

             useHTML: true

         },

       

         legend: {                                                          

             enable:true                                              

         },   

         credits: {

             enabled:false

  },

         exporting: {

             enabled: false

         },

         series: [{

        name:'XX总额'

         },

         {

        name:'XX余额'

         }]
   });

$(document).ready(function () {

//jsonStr为从后台ajax方式或其他方式，获取的json字符串，后台组装数据格式为Map<String,Object> returnMap=new Map<String,Object>; returnMap.put("list",mapList);

// List<Map<String,Object>> mapList=new ArrayList();   Map<String,Object> newMap=new Map<String,Object>; 

//            newMap.put("name","20160513"); newMap.put("age","19");mapList.add(newMap);

var jsonStr='{"list":[{"name":"20160510","age":19},{"name":"20160511","age":422},{"name":"20160512","age":1119},{"name":"20160513","age":19},{"name":"20160514","age":19},{"name":"201605105","age":19},{"name":"20160516","age":19}]}';

var jsonStrCPY='{"list":[{"name":"20160510","age":19},{"name":"20160511","age":422},{"name":"20160512","age":1119},{"name":"20160513","age":19},{"name":"20160514","age":19},{"name":"201605105","age":19},{"name":"20160516","age":19}]}';

if(jsonStr!=''){
    var json = eval("("+jsonStr+")");

   
var jsonCPY = eval("("+jsonStrCPY+")");
       for(var key in json.list){
       
  json.list[key].y = parseFloat(json.list[key].age);   //注意y的取值应该是Float，对于string类型的，需要转换一下parseFloat
       
 xtext[key] =json.list[key].name;
       
 json.list[key].color= color[key%7]; 
       }

  for(var key in

jsonCPY .list){
       
  jsonCPY .list[key].y
= parseFloat(jsonCPY .list[key].age);
  //注意y的取值应该是Float，对于string类型的，需要转换一下parseFloat
       
 xtext[key] =jsonCPY .list[key].name;
       
 jsonCPY .list[key].color=
color[key%7]; 
       }
       chart.series[0].setData(json.list);//数据填充到highcharts上面  

 chart.series[1].setData(jsonCPY .list);//数据填充到highcharts上面 
    }else{
    $("#container1").html('');
    }

})

</scrilpt>