Highcharts-2.2.5&图表插件学习&----&数据交互&上
以上是一个居于HTML5的仓库监测项目，使用Highcharts进行数据的图表展示，之后还会更新实时监控，望大家多提意见；
上篇Highcharts-2.2.5 图表插件学习 --
API，已经将前台Highcharts框架导入到项目中，现在主要考虑如何将死的数据变活的问题，我使用的是javaEE，后台很一般，就是SSH2，基于最新版（不过hibenate使用的是3系列），后面如果可以我会将应用打包上来。
下面将主要的源码贴出来，大家多指点。
前台界面入口：chartDetector.jsp
&%@ page language="java"
contentType="text/ charset=UTF-8"
pageEncoding="UTF-8"%&
&%@ taglib prefix="s" uri="/struts-tags"
&s:include
value="../header.jsp"&&/s:include&
&!--header.jsp
就是导航部分，这是一个小的查询项目，更能不是很复杂。主要数据是由C写的集成硬件通过HTML5
的WebSocket 双工通信插入的。
有机会将会将WebSocket 的小示例上上来，跟大家交流。
当前页面需求分析：
1.基本要求就是需要根据不同的探测站点编号，和不同的时间段进行查询，时间段是以小时为单位，以当前时间为参照系。
2.通过一个click事件发起对后台数据的获取，主要需要首先定位好的就是项目需要显示的数据类型，和Highcharts
plot区域所需要的数据如何通过后台封装，需要封装成什么结构，之后数据到前台之后如何进行拆封....
先看看返回的数据结构，至于该数据结构的需求会在后面***：
{"humiCon":[0.06,0.0,0.49,0.0,0.51,0.0,0.75,0.0,0.54,0.0,0.51],
"timeCon":["10:45","10:52","10:55","11:02","11:05","11:12","11:15","11:22","11:24","11:32","11:34"],
"tempCon":[0.9,0.0,0.27,0.0,0.19,0.0,0.84,0.0,0.98,0.0,0.7]}
一个JSON对象，其中封装了3条数据，相对还是清晰的，其中humiCon表示探测站点的湿度值；tempCon表示的是温度值；timeCon表示的是对于的时间段区间，其中3个数组的值都是一一对应，也就是说是在同一个javabean中的3个属性而已，因为在Highcharts中当前使用的chart.type是默认的line(api:The
default series type for the chart. Can be one of line, spline,
area, areaspline, column, bar, pie and scatter. Defaults to
"line".)，xAxis属性使用的type也是默认的（The type of axis. Can be one of
"linear", "logarithmic" or "datetime". In a datetime axis, the
numbers are given in milliseconds, and tick marks are placed on
appropriate values like full hours or days. Defaults to
"linear".），之后在xAxis中定义了一个对象来统一表示两组数据的xAxis标尺，这里使用的是categories:
[]，（api：If categories are present for the xAxis, names are used
instead of numbers for that axis. Example:categories: ['Apples',
'Bananas',
'Oranges']）可见这里就需要上面返回的“timeCon”这个数组对象，之后会在ajax回调中，为其设值，由于当前项目需求查询过去的数据，所以没有采用：
& & & type:
'datetime',
& & & maxZoom:
48 * 3600 * 1000
这种方式，这种将会在后面的实时监控demo中贴出相应示例。
而3组数据的另外两组就分别作为主视图中的两个，怎么说呢，就叫做humi和temp吧，这个图的关键就在于在统一个chart中显示了2组数据，但是是用一个站点的，也就是说是同一个探测点的相同时间间隔的两组数据的呈现。个人表达能力不是很好
呵呵～ 见谅。
而这两组数据分别需要插入到new Highcharts.Chart({... series:
[...这个数组中]。
series: [{
& & data: []
& & & }, {
这将会对应于yAxis: [{...},{...}]中的两个图例。关键在于对于series中
yAxis属性的设定，(api:When using dual or multiple y axes, this number
defines which yAxis the particular series is connected to. It
refers to the index of the axis in the yAxis array, with 0 being
the first. Defaults to 0.
Try it: Apply the column series to the secondary Y
axis),不指定默认就是0，之后从1开始设定，需要的参数类型：yAxis :
Number，更详细的api解释，请看这里：/ref/#series--yAxis
下面就在源码上面简单的进行注释加以说明。
注：前端使用了struts2 mvc，所以在当前页面中会使用到struts2的tag lib。
&div class="listMenuStyle"
id="listMenu"&
cssClass="nav2layer"&
class="select_option_label"&站点编号：
&select id="station" class="list_range"
name="station" onchange=""&
&option&选择站点查询&/option&
&option value="1" &s:if
test="station ==
1"&selected="selected"&/s:if&&1号&/option&
&option value="2" &s:if
test="station ==
2"&selected="selected"&/s:if&&2号&/option&
cssClass="nav2layer"&
class="select_option_label"&时间段：
&select id="hour" class="list_range"
name="hour" onchange=""&
&option&按时查询&/option&
&option value="1" &s:if
test="time ==
1"&selected="selected"&/s:if&&1小时&/option&
&option value="3" &s:if
test="time ==
3"&selected="selected"&/s:if&&3小时&/option&
&option value="6" &s:if
test="time ==
6"&selected="selected"&/s:if&&6小时&/option&
&option value="12" &s:if
test="time ==
12"&selected="selected"&/s:if&&12小时&/option&
&option value="24" &s:if
test="time ==
24"&selected="selected"&/s:if&&24小时&/option&
&s:div cssClass="nav2layer"
id="add_content_box"&
&button id="refresh" type="button"
class="query4list"
onClick="getData();"&点击进行查询&/button&
&div class="char_box"&
&div id="container"
style="background-color:#FFF;
min-width: 400
height: 400
auto"&&/div&
&!--基本需要引入的框架就在官方可以下载到，但是现在不知道这个东东如果应用如商业项目会有什么后果，希望有识之士相告一下，您懂我的意思，嘿嘿。
建议首先看单击click之后触发的getData函数进入，就像使用deBug一样。
&script type="text/javascript"
src="../js/jquery-1.7.2.js"&&/script&
&script src="../js/highcharts.js"
type="text/javascript"
&&/script&
&script src="../js/modules/exporting.js"
type="text/javascript"
&&/script&
type="text/javascript"&
//一个打印函数，便于之后清除打印，原因，console.log 在IE下会导致脚本运行异常。
function print(mesaage, prefix) {
var msg =// closure
if(prefix)//default undefind
console.log(prefix+": " + msg)
console.log(mesaage);
//chart obj
//渲染hightChat的主函数；
function RenderChart(){
//这里需要定义一个全局变量，一供在ajax回调中将数据设置到该对象中。
chart = new Highcharts.Chart({
& & & chart:
& & renderTo:
'container',//图表容器，一个简单的div
& & zoomType:
'xy',//这里的数据缩放机制还没搞清楚，到底是图像的放大，但是一定不会是数据的复查和chart的重渲，应该是一个鸡肋，在关键应用中，如果理解不深还是不要开启。如果有朋友知道相应的触发事件或者其他，望相告一下。
& & //Event listeners for the
& & events: {
//当前demo没有用到chart事件，将会在实时监控应用中使用，load事件。
& & & },credits:
enabled: false &
//右下角不显示LOGO，这里我还想请教一下如果不给钱会怎样？
& & & title:
& & text: '仓库站点探测图',
& & align: 'center',
& & margin:
30,//类比html的margin，相对于中间的图形区域
color: '#2d2d2d',
fontWeight: 'bold',
fontSize: '18px',
fontFamily: '微软雅黑, 黑体',
& & & subtitle:
& & text: '温湿度探测',
y:40,//类比于margin
color: '#89A500',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: '微软雅黑, 黑体',
//X:带替换,在server端返回小时间段进行替换，这里是在之前做前台测试的时候写的注解，这也是项目开发的一个经验吧，先用死的数据将项目构造出来，之后在进行动态交互。所以这里有很多注解我都没删了。
& & & xAxis:
& & &categories:
[]//当前X轴的数据，默认也就是空的数组。这里就是如果你将type值使用默认，那么当前数组类型就可以任意指定了。我将会将上面返回的"timeCon":["10:45","10:52","10:55","11:02","11:05","11:12","11:15","11:22","11:24","11:32","11:34"]这组值给设定进去，作为两条参数的一个标识单位，以时/分划分，但是感觉不是很好应该加上时期。
//需要注意的是这里的yAxis具有两个数据标尺。通过两个对象字面量指定。
& & & yAxis:
[{//一个数组设置chart yAxis的左右labels style
& & labels:
{//设置温度样式，this就应该表示当前这个Axis对象/数据集对象
& formatter: function() {//格式化程序
& & & return
this.value+'°C';//在图像被渲染的时候就会被触发,this.value?应该是根据添加的数据对象的温度来进行设置的；
& style: {
& & & color:
'#89A500',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: '微软雅黑, 黑体',
& & title: {
& text: '温 度',
& style: {
& & & color:
'#89A500',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: '微软雅黑, 黑体',
& & },plotLines: [{
& &color: '#00FF00',
& &width: 2,
0.5,//需要注意这里的设置需要和对应的数据类型相匹配
&dashStyle:'ShortDash',//定制警戒线样式,有虚线/实线...
& &zIndex:
10,//类比html中的z-index
& &label: {
&text: '超出温度临界值',
color: '#00FF00',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: '微软雅黑, 黑体',
& & & }, {
& & labels: {
& formatter: function() {
& & & return
this.value +' %';
& style: {
& & & color:
'#4572A7',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: '微软雅黑, 黑体',
& & title: {// 设置湿度样式
& text: '湿 度',
& style: {
& & & color:
'#4572A7',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: '微软雅黑, 黑体',
& & &plotLines:
& &color: '#FF0000',
& &width: 2,
0.5,//需要注意这里的设置需要和对应的数据类型相匹配
&dashStyle:'ShortDash',//定制警戒线样式,有虚线/实线...
& &zIndex:
10,//类比html中的z-index
& &label: {
&text: '超出湿度临界值',
color: '#FF0000',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: '微软雅黑, 黑体',
& & opposite:
true//将两个标尺分别设置在chart的左右两边
& & & }],//yAxis
option end
& & & tooltip:
{//tooltip触发,类比于html中的title
& & formatter: function() {
& return '探测数据 '+
& & & this.x +':
'+ this.y +
(this.series.name == '湿 度' ? ' mm' : '°C');//series就代表了探测数据对象
& & & legend:
& & layout:
'vertical',//定义图例的排列方式
& & align: 'left',
verticalAlign: 'top',
& & x: 120,
& & y: 100,
& & floating: true,
& & backgroundColor:
& & & series:
[{//当前数据和上面的yAxis属性对应的数组相匹配
& & name: '湿
度',//定义图例的/数据节点/series的名字
& & color:
'#4572A7',//控制series的颜色
'column',//指定序列的显示类型/样式
& & yAxis:
1,//从这里划分两个series组
& & // 此处存放数据值 用,分开
例如：1.8,8.9,null,9.2, & 如果在某一点数据为空可以用null 来表示
& & //如果是想动态赋值这个位置 应该为空 即：data:
[]，之后在load even被回调之后在将数据赋值进来
& & data: []
& & & }, {
& & name: '温 度',
& & color: '#89A54E',
& & type: 'spline',
& & data: []
& });//chart end
// 与后台进行数据交互,点击按钮之后被触发。 &
& & function
getData(){
//首先获取站点名和查询时间间隔，默认以当前系统时间为参照系。
var station_id = $("#station
option:selected").attr("value");
var hour = $("#hour option:selected").attr("value");
//所有print 为打印测试，这里我就不删了，才学编程没什么经验，代码很乱，望指正。
print(station_id,"station2");
print(hour,"hour2");
//一点简单的校验，由于是在把项目基本功能跑通之后才回头做的检验，比较简陋。
if("选择站点查询" == $("#station option:selected").val()){
alert("请先选择一个待查询的站点。");
if("按时查询" == $("#hour option:selected").val()){
window.prompt("请选择查询时间，以小时为单位","请直接输入1/3/6/12/24几个数值。")
if(null==hour||!(hour==1)||!(hour==3)||!(hour==6)||!(hour==12)||!(hour==24)){
& print(hour,"键入时间");
//进入桥接。
async : true,
type: "POST",
url: "chartDetector.action",//后端入口
data: {station: station_id,hour: hour},//需要两个参数作为查询依据。
success: function(returnedDate, status)
//为图表设置值:series[0]表示温度；反之亦然；
if(!returnedDate.tempCon){
& & & print("no
alert("当前查询无数据内容，请更换站点，或者时间，重新查询。");
window.location.href =
"&%=request.getContextPath()%&/Detector/chartDetector.jsp";
print(returnedDate.tempCon,"tempCon");&
print(returnedDate.humiCon,"humiCon");
print(returnedDate.timeCon,"timeCon");
//渲染chart--------》可以进入该函数先。
RenderChart();
//但基础的视图渲染完毕之后就可以将后台获取得到的3组数据分别通过chart全局对象，设置到对于的数据存储区域中完成数据的填充了。在下篇中将提供后台代码。
chart.series[0].setData(returnedDate.tempCon);
chart.series[1].setData(returnedDate.humiCon);
chart.xAxis[0].setCategories(returnedDate.timeCon);
print("success","return");&
error: function(xhr, status, errorThrown)
//window.location.href =
"listDetectorRtime.action?start=0&range=10";
print(errorThrown,"error return");
});//ajax end
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。