hightcharts java的实现实例

         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 chart = new Highcharts.Chart({
       chart:{
           renderTo:'container1',
           type:'spline' ,//显示类型 柱形

            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: '个数'

             },

             min: 0,

             plotLines: [{

                 value: 0,

                 width: 1,

                 color: '#808080'

             }]

         },

         tooltip: {

             formatter: function () {

                 return '<b>' + this.series.name + '</b><br/>' +

                  this.x + '：' +

                     this.y;

             }

         },

         legend: {

             enabled: false

         },

         credits: {

             enabled:false

  },

         exporting: {

             enabled: false

         },

         series: [{

        name:'新增用户'

         }]
   });

$(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}]}';

if(jsonStr!=''){
    var json = eval("("+jsonStr+")");
       for(var key in json.list){
       
 json.list[key].y = parseInt(json.list[key].age);   //注意y的取值应该是int，对于string类型的，需要转换一下parseInt
       
xtext[key] =json.list[key].name;
       
json.list[key].color= color[key%7]; 
       }
       chart.series[0].setData(json.list);//数据填充到highcharts上面  
    }else{
    $("#container1").html('');
    }

})

</scrilpt>