1.添加highcharts.js和jquery-3.2.1.min.js ，在WebRoot下新建文件夾JS，將最新的highcharts.js
和jQuery的js文件放入其中，其使用路徑即為 src="JS/文件名.js"
<head>
<script language="javascript" type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script language="javascript" type="text/javascript" src="JS/highcharts.js"></script>
</head>
2.
$(document).ready(function(){
});
//當(dāng)DOM已加載，且頁面完全呈現(xiàn)（包括圖片）,會發(fā)生ready事件，因此把jQuery事件和函數(shù)置于該事件中
其語法有三種：
$(document).ready(function)
3.使用highcharts
var chart ;
var xJson = new Array(4); //聲明一個全局?jǐn)?shù)組，用來存放servlet返回的json數(shù)據(jù)
chart = new Highcharts.Chart({ //使用highcharts
chart{
renderTo : 'container '//目標(biāo)容器(建立一個div用來容納圖形)的id
type : 'column' //生成圖形的類型，column表示 柱形圖
events : { //對圖形數(shù)據(jù)進(jìn)行操作，
load : function(){ //加載后，觸發(fā)function函數(shù)
var series = this.series[0] ; //this表示當(dāng)前頁面，將圖例series[0]賦值給
//series
setInterval(function(){ //延時2000毫秒循環(huán)觸發(fā)函數(shù)function()
$.ajax({ //使用ajax動態(tài)獲取servlet傳回的json數(shù)據(jù)
type : ' post ' ,//請求方式為post
url : ' ColumnControl' , //web.xml中配置好的servlet的路徑
data : ' ' ; //請求時傳送的值
dataType : ' json ' ; //從servlet返回的數(shù)據(jù)為 json 數(shù)據(jù)
success : function(data){ //請求成功后 處理 servlet傳回的json數(shù)據(jù) data
var json = data[0];、
xJson[0] = json.TDS*1 ; //json.TDS為String類型的double數(shù)據(jù)，"3.14",
//json.TDS*1可以將其轉(zhuǎn)換為double類型，3.14
xJson[1] = json.TEM*1 ;
xJson[2] = json.HEIGHT*1 ;
}
}) ;
var data = [ ] ; //將xJson中的數(shù)據(jù)放入data[ ]中
data.push([ ' TDS ' , xJson[0]]);
data.push([ ' TEM ' , xJson[1]);
data.push([ ' HEIGHT ' , xJson[2]);
series.setData(data); //將data[]中的數(shù)據(jù)添加到圖中
//設(shè)置柱形圖每根柱子的顏色
var colo = [ {color:"#345"}, {color:"#421"}, {color:"#687"}];
series.setData(colo); //將柱子顏色添加到圖中
} , 2000);
}
}
} ,
title : {
text : ' ' //圖形的主標(biāo)題，將其設(shè)置為空，
} ,
subtitle: {
text: '編號：'+'000003' //圖形的副標(biāo)題
},
credits: {
enabled:false //去掉 highcharts.com
},
xAxis: {
categories: ['TDS', 'TEM', 'HEI'] //x軸下標(biāo)
},
yAxis: { //對y軸進(jìn)行設(shè)置
min: 0, //不顯示負(fù)數(shù)
tickInterval: 10,//按10來等分
title: {
text: ''
},
stackLabels: { //暫未知其具體作用
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: { //設(shè)置圖例(series表示的樣例)在整個圖中的位置
align: 'right', //圖例位于整個圖的右側(cè)（此時，所在位置即為原位置）
x: 5, //從原位置向右移動5
verticalAlign: 'top',
y: -5, //從原位置向上移動5
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.
legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: { //鼠標(biāo)經(jīng)過柱圖時顯示 的數(shù)據(jù)
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false, //ture表示在柱子上顯示數(shù)值
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' //顯示數(shù)值的顏色樣式
}
}
},
series: [{
name: '實(shí)時監(jiān)測',
data: [0, 0, 0,0]
}]
}) ;
4.servlet對請求的處理
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Map<String,String> map = null;
List<Map> lis=null;
jsonArray = new JSONArray();
JSONArray jsonArray = null;
lis = new ArrayList<Map>();
map = new HashMap<String,String>();
map.put("TDS", Math.random()*100+"");
map.put("TEM", Math.random()*100+"");
map.put("HEIGHT", Math.random()*100+"");
lis.add(map);
System.out.println(map);
response.setContentType("text/html; charset=gb2312");
//對ajax請求的回應(yīng)
response.getWriter().write(jsonArray.fromObject(lis).toString());
}
以下是完整代碼
<head>
<script language="javascript" type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script language="javascript" type="text/javascript" src="JS/highcharts.js"></script>
<script language="javascript" type="text/javascript" src="JS/exporting.js"></script>
<script type="text/javascript">
var chart;
var xJson = new Array(4);
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0] ;
setInterval(function() {
$.ajax({
type : 'post',
url : 'ColumnControl',
data : '',
dataType : 'json',
success:function(data){
var json = data[0];
//alert("json數(shù)據(jù)處理");
xJson[0]=json.TDS*1;//json.TDS*1
//alert(xJson[0]);
xJson[1]=json.TEM*1;
xJson[2]=json.HEIGHT*1;
xJson[3]=json.PH*1;
}
});
var data = [];
data.push(['TDS', xJson[0]]);
data.push(['TEP', xJson[1]]);
data.push(['HEI', xJson[2]]);
data.push(['PH', xJson[3]]);
var colo = [ {color:"#345"}, {color:"#421"}, {color:"#687"}, {color:"#129"}];
series.setData(data);
series.setData(colo);
}, 2000);
}
}
},
title: {
text: ''
},
subtitle: {
text: '編號：'+'000003'
},
credits: {//去掉 highcharts.com
enabled:false
},
xAxis: {
categories: ['TDS', 'TEM', 'HEI', 'PH'] ,
},
yAxis: {
min: 0, //不顯示負(fù)數(shù)
tickInterval: 10,//按10來等分
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: { //設(shè)置圖例(series表示的樣例)在整個圖中的位置
align: 'right', //圖例位于整個圖的右側(cè)（此時，所在位置即為原位置）
x: 5, //從原位置向右移動5
verticalAlign: 'top',
y: -5, //從原位置向上移動5
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false, //ture表示在柱子上顯示數(shù)值
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' //顯示數(shù)值的顏色樣式
}
}
},
series: [{
name: '實(shí)時監(jiān)測',
data: [0, 0, 0,0]
}]
});
});
</script>
</head>
