实习笔记之Spring MVC + ajax + highcharts

mentor要求我在页面上显示一个折线图出来，花了两天多时间终于做好了，贴部分代码出来，希望能帮到大家。

下面是controller里面的方法，返回一个json数据。

@RequestMapping(value="chart/ajax/{name}", method = RequestMethod.GET)
public @ResponseBody String showChart(@PathVariable String name, Model model){
return jsonObject.toString();
}

下面是jsp里面的代码

<div class="chart">
	<div id = "${ rName }" name="container" style="min-width: 400px; height: 200px; margin: 0 auto">
		<script type="text/javascript">
			function getForm(){
				var name = "${ rName }";
				$.ajax({
					type:"GET",
					url:"chart/ajax/"+name,
					dataType:"JSON",
					success:function(data){
						getChart(data,name);
						}				
				});
			}
			getForm();

		</script>	
	</div>
</div>

下面是js里面的代码

function getChart(data,name){

	eval( "data=" + data );
	var keys = [];
	var values = [];
	for(var key in data){
		keys.push(key);
		values.push(data[key]);
	}
	keys = keys.reverse();
	values = values.reverse();
	 var chart = new Highcharts.Chart({
          chart: {
              renderTo: name,
              type: 'spline'
          },
          credits: {
              enabled : false,                   
          },
          title: {
              text: 'trend chart',
              y:10
          },
        
          xAxis: {
              categories: keys
          },
          yAxis: {
              title: {
                  text: 'Total Count'
              },
              labels: {
                  formatter: function() {
                      return this.value +''
                  }
              }
          },
          tooltip: {
              crosshairs: true,
              shared: true
          },
          plotOptions: {
              spline: {
                  marker: {
                      radius: 4,
                      lineColor: '#666666',
                      lineWidth: 1
                  }
              }
          },
          series: [{
              name: 'count',
              marker: {
                  symbol: 'square'
              },
              data: values}]
      });
 }

就这么多，希望能对大家有所帮助