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 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>