实习笔记之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里面的代码

下面是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}]
      });
 }


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




你可能感兴趣的:(Web)