highcharts动态柱形图使用总结

1.添加highcharts.js和jquery-3.2.1.min.js ，在WebRoot下新建文件夹JS，将最新的highcharts.js

和jQuery的js文件放入其中，其使用路径即为 src=\"JS/文件名.js\"

src=\"JS/highcharts.js\">

$().ready(function) $(function)

3.使用highcharts var chart ;

var xJson = new Array(4); //声明一个全局数组，用来存放servlet返回的json数据

chart = new Highcharts.Chart({ //使用highcharts chart{

renderTo : 'container '//目标容器(建立一个div用来容纳图形)的id

type : 'column' //生成图形的类型，column表示 柱形图 events : { //对图形数据进行操作，

load : function(){ //加载后，触发function函数

var series = this.series[0] ; //this表示当前页面，将图例series[0]赋值给

//series

setInterval(function(){ //延时2000毫秒循环触发函数function() $.ajax({ //使用ajax动态获取servlet传回的json数据 type : ' post ' ,//请求方式为post

url : ' ColumnControl' , //web.xml中配置好的servlet的路径 data : ' ' ; //请求时传送的值

dataType : ' json ' ; //从servlet返回的数据为 json 数据 success : function(data){ //请求成功后 处理 servlet传回的json数据 data

var json = data[0];、

xJson[0] = json.TDS*1 ; //json.TDS为String类型的double数据，\"3.14\

//json.TDS*1可以将其转换为double类型，3.14 xJson[1] = json.TEM*1 ; xJson[2] = json.HEIGHT*1 ; } }) ;

var data = [ ] ; //将xJson中的数据放入data[ ]中 data.push([ ' TDS ' , xJson[0]]); data.push([ ' TEM ' , xJson[1]); data.push([ ' HEIGHT ' , xJson[2]);

series.setData(data); //将data[]中的数据添加到图中

//设置柱形图每根柱子的颜色

var colo = [ {color:\"#345\series.setData(colo); //将柱子颜色添加到图中

} , 2000); } } } , title : {

text : ' ' //图形的主标题，将其设置为空， } , subtitle: {

text: '编号：'+'000003' //图形的副标题 }, credits: {

enabled:false //去掉 highcharts.com }, xAxis: {

categories: ['TDS', 'TEM', 'HEI'] //x轴下标 },

yAxis: { //对y轴进行设置 min: 0, //不显示负数

tickInterval: 10,//按10来等分 title: { text: '' },

stackLabels: { //暂未知其具体作用 enabled: true,

style: {

fontWeight: 'bold',

color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'

} } },

legend: { //设置图例(series表示的样例)在整个图中的位置 align: 'right', //图例位于整个图的右侧（此时，所在位置即为原位置）

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 ''+ this.x +'
'+ this.series.name +': '+ this.y +'
'+ 'Total: '+ this.point.stackTotal; } },

plotOptions: { column: {

stacking: 'normal',

dataLabels: {

enabled: false, //ture表示在柱子上显示数值 color: (Highcharts.theme

&&

Highcharts.theme.dataLabelsColor) || 'white' //显示数值的颜色样

式

} } }, series: [{

name: '实时监测', data: [0, 0, 0,0] }] }) ;

4.servlet对请求的处理 protected

void

doPost(HttpServletRequest

HttpServletResponse response)

throws ServletException, IOException { Map map = null; List

jsonArray = new JSONArray(); JSONArray jsonArray = null; lis = new ArrayList

map = new HashMap(); map.put(\"TDS\map.put(\"TEM\map.put(\"HEIGHT\lis.add(map);

request,

System.out.println(map);

response.setContentType(\"text/html; charset=gb2312\"); //对ajax请求的回应

response.getWriter().write(jsonArray.fromObject(lis).toString());

}

以下是完整代码 src=\"JS/highcharts.js\"> src=\"JS/exporting.js\">