highcharts

      最近项目所需画图，觉得highcharts插件是引用纯js构造，如何从后台取值传到前端页面展示。项目框架：spring mvc

如下所示:(曲线图)

 

在servlet-context.xml中需配置将对象转化成json格式的数据转化到前端页面展示：

<bean

class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />

<bean

class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">

<property name="messageConverters">

<list>

<ref bean="mappingJacksonHttpMessageConverter" />

</list>

</property>

</bean>

<bean id="mappingJacksonHttpMessageConverter"

class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">

<property name="supportedMediaTypes">

<list>

<value>text/html;charset=UTF-8</value>

</list>

</property>

</bean>

 

然后在collertor中得到后端数据:

@RequestMapping("/getData.json")

@ResponseBody

public Object getChartData(String type, HttpServletRequest request,

HttpServletResponse response) throws Exception {

//判断类型

 

String managerId = (String) request.getSession().getAttribute("managerId");

Long lo = null;

try {

if (managerId != null) {

lo = new Long(managerId);

}

} catch (Exception e) {

 

}

 

if (lo == null) {

lo = 0L;

}

 

if ("WAS.UsedMem".equals(type)) {

List list = getWasDataService.produceGraphData(lo, "WASJVM");

 

List<List<Long>> resultList = new ArrayList<List<Long>>();

if (list != null && list.size() > 0) {

for (int index = 0; index < list.size(); index++) {

Map map = (Map) list.get(index);

BigInteger collectionTime = (BigInteger) map.get("COLLECTIONTIME");

Integer usedMem = (Integer) map.get("USEDMEMORY");

List<Long> l = new ArrayList<Long>();

l.add(collectionTime.longValue());

l.add(usedMem.longValue());

resultList.add(l);

}

}

 

return resultList;

}

 

return null;

 

}

从数据库中得到数据，并保存到json格式的数据中。

前端：

 

<script>

$(function() {

 Highcharts.setOptions({

  global: {

   useUTC: false

  }

 }); 

 

 usedMemChart =  new Highcharts.Chart({

  chart: {

   renderTo: 'container',

   type: 'spline',

   marginRight: 1,

   events: {

             load: requestData

         }

  },

  title: {

   text: '最近一小时内存'    

  },

  xAxis: {

   type: 'datetime'    

  },

  yAxis: {

   title: {

    text: '已用内存(KB)'

   },

   labels: {

    formatter: function() {

     return this.value;

    },

    style: {

     color: '#4572A7'

    }

   },

   plotLines: [{

    value: 0,

    width: 1,

    color: '#069B14'

   }]

  },

  tooltip: {

   formatter: function() {

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

     Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+

     Highcharts.numberFormat(this.y, 2);

   }

  },

  legend: {

   enabled: false

  },

  exporting: {

   enabled: false

  },

  plotOptions: {

   spline: {

    lineWidth: 4,

    states: {

     hover: {

      lineWidth: 5

     }

    },

    marker: {

     enabled: false,

     states: {

      hover: {

       enabled: true,

       symbol: 'circle',

       radius: 5,

       lineWidth: 1

      }

     }

    },

    pointInterval: 300000,

    pointStart: (new Date()).getTime() - 3600000 //一个小时

   }     

  },

  series: [{

   name: '内存',

   data: []

  }]

 });

 

});

 

 

function requestData() {

 $.ajax({

     url: 'getData.json',

     data: {"type":"WAS.UsedMem"},

  type: 'post',

     dataType: 'json',

     success: function(data) {

         var series = usedMemChart.series[0];

         series.setData(data);  

 

         // call it again after one second

         setInterval(requestData, 300000);   

     },

     error: function(xhr) {

       // call it again after one second

         setInterval(requestData, 120000);

     },

     cache: false

   });

 }

 

</script>

 

引用的requestData这个方式是自动刷新，且从后台得到数据传给前端页面展示。

 

  画图工具highcharts api:

http://www.highcharts.com/ref/#plotOptions-pie

 

评论

1 楼 hzxlb910 2013-03-04  

能把这个demo打包发给我吗，谢谢

[e-mail]