转载自:http://zhaowenbinmail.blog.163.com/blog/static/39080862012111103532746/
这篇文章讲得很详细,对于初步接触HighCharts图表的人来说还是挺有帮助的,经实际操作,可借鉴性高，故转载
第一，在jsp页面头部引入highcharts.js、jquery-1.8.3.min.js文件，应用代码参考如下：
<script type="text/javascript" src="http://zhaowenbinmail.blog.163.com/blog/js/jquery-1.8.3.min.js"></script> <script src="http://zhaowenbinmail.blog.163.com/blog/js/highcharts.js"></script>
第二，在jsp页面的Body体中加入一个div元素，highcharts将在这个div元素中绘制曲线图。
<div id="container" style="min-width: 100px; height: 400px; margin: 0 auto"></div>
注意：我们为这个div指定了一个id值，这个id值将来对我们很有用，它是使highcharts知道在何处绘制图表的根源。
第三，我们需要在jsp页面中加入我们自己的js文件。这个文件用来实现特定的业务呈现逻辑。
<script type="text/javascript" src="http://zhaowenbinmail.blog.163.com/blog/js/chart.js"></script>
现在我来讲解一下我需要实现的业务的大体需求。我需要在页面上显示大桥表面一天24小时的温度变化情况（当然这些温度值的变化本案例中都是通过随机数来产生的）。在我们的很轴方向上需要显示从0点开始到晚上23点的时间刻度，并且要求固定就显示0到23这24个刻度，在纵轴方向显示桥面传感器检测到的本小时内温度最大值，然后模拟时间推移显示每小时的温度变化曲线图。
依据以上需求分析，在页面呈现时，我们就要去读取本天从0点开始到当前时刻的数据，并将数据绘制显示成曲线图。因此我们接下来就要编辑我们自己的js文件——chart.js。在此文件中创建Highcharts对象，通过设置相关的属性来影响曲线图的呈现，使其满足我们的需求要求。
我们首先定义一个全局的图表对象，我们命名为chart，同时示例化Highcharts对象，具体见下面代码：
var chart;
$(function () {
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 80,
events: {
load:loadTime
}
},
title: {
text: '大桥采集数据',
x: -20
},
subtitle: {
text: '传感器编号: 传感器1',
x: -20
},
xAxis: {
title: {
enabled: true,
text: '时间（小时）'
},
max:23,
min:0,
tickPixelInterval:50
},
yAxis: {
title: {
text: '压力 (℃)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'℃';
}
},
legend: {
x: -50,
y: 10,
enabled: true
},
exporting: {
enabled: false
},
plotOptions: {
line: {
gapSize: 100
}
},
series: [{
name: '最大值',
data: getFirstData()
}]
});
});
});
在上面代码中我们实例化了一个Highcharts对象，并指定了此对象一些属性。在定义中我们可以看到如下代码：
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 80,
events: {
load:loadTime
}
}
在这段代码中就知道了图表需要绘制到的div元素，注意看上面红色字体部分。这个地方的container就是jsp页面上div的id值（大家可以回过去查看一下我前面的代码）。
其后指定了这个图表的类型（见上面代码中蓝色字体部分）。这里指定的Line类型，这就会绘制成曲线。
代码中还指定了图表的事件，目前只指定了一个load事件，在图表装载时将会调用执行load时间对应的函数。代码后面的loadTime是我编写的一个js函数，这个函数后面介绍。
通过title、subtitle指定图表的标题、子标题，见下面代码：
title: {
text: '大桥采集数据',
x: -20
},
subtitle: {
text: '传感器编号: 传感器1',
x: -20
},
通过改变这里的设置可以影响图表上显示的效果，显示效果如下图红框选中部分内容。
通过xAxis、yAxis设定图表中横坐标、纵坐标的属性。
xAxis: {
title: {
enabled: true,
text: '时间（小时）'
},
max:23,
min:0,
tickPixelInterval:50
},
yAxis: {
title: {
text: '压力 (℃)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
通过在xAxis、yAxis中设置title属性控制横坐标、纵坐标上的文字描述显示。
在横坐标中有时我们是需要指定坐标上每个坐标点需要显示的文字内容的，这时我们需要使用到一个categories属性，通过将一个数组值传给categories属性，这样在横坐标 上的每个坐标点就会按照指定的属性内容显示坐标点信息。为了实现如上目的，我们需要再设置一个变量，并将这个变量赋予categories属性。详见下：
var x_arr=['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
通过上面代码段我们定义了一个变量，然后看看如何指定到chart对象中，请注意如下代码端中红色部门，就是较前面代码端增加的地方：
xAxis: {
title: {
enabled: true,
text: '时间（小时）'
},
categories:x_arr,
max:23,
min:0,
tickPixelInterval:50
},
横坐标上就是按照我们在x_arr变量中设定的内容显示的。如果设定的内容少于横坐标的坐标点，则前面的坐标点将按x_arr变量中设定内容显示，后面的坐标点将按默认的坐标点信息显示。
工程控制人员通过此曲线图可以知道每个时间点的最高温度情况，但是具体某个点温度是多少，工程人员希望通过将鼠标指向图表中采集点就可以展现出来。要实现这个功能，我们需要在chart对象中指定tooltip属性，见下面代码：
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'℃';
}
},
当鼠标移动到10点中的采集点时，屏幕上会立即显示当时的温度值。
针对有些应用场合，我们在一个图表中将展示多个线条代表不同的含义，这时就需要通过图例来说明什么颜色线条代表什么含义，这种情况下就需要启用图例说明，要启用图例说明就必须通过如下属性进行配置：
legend: {
x: -50,
y: 10,
enabled: true
},
只要使legend对象中的enabled属性设置为true就可以。设置为false，将不显示图例。
上面介绍的是图例基本的属性设置，现在我们需要模拟一些大桥传感器获得的数据，依据这些数据来显示曲线图。在这里我们首先要定义两个js函数，这三个函数就是模拟获取数据的，请看下面：
function loadTime(){
window.setTimeout(getData,TIMEOUT);
}
上面这个函数就是我们在chart对象中设置events中的load事件指定的函数。在本函数中主要启动了一个定时器，在超过指定时间计秒后，将调用函数getData。
function getFirstData(){
var data = [];
var y_mx=Math.round(Math.random()*10);
var i;
for (i = 0; i <= 0; i++) {
data.push({
x: current_time,
y: y_mx
});
if(current_time<=23){
current_time++;
}
}
return data;
}
这个函数是用来模拟初始化chart对象时，获得的大桥桥面温度值。其返回的是一个数组对象，数组中的每个对象包含x、y属性，这两个属性用来告诉chart对象x轴的某个坐标上面的y值是多少，并在此处显示一个坐标点，同时将连接相邻两个坐标点形成曲线。代码中的current_time是一个全局变量，用来对当前采集显示次数进行计数。
function getData(){
var current_x=x_arr[current_time];
//获取最大值
var series_mx = chart.series[0];
var y_mx=Math.round(Math.random()*10);
series_mx.addPoint([current_time, y_mx], true, false);
current_time++;
if(current_time<=23){
window.setTimeout(getData,TIMEOUT);
}
}
上面这个函数其它部分都很简单，关键的一个重点代码是
series_mx.addPoint([current_time, y_mx], true, false);
这一段，这段代码是在chart图表中加入一个新的坐标点。
截至到目前，全部的代码就编写完成，现在运行它，就可以模拟出大桥桥面稳定24小时检测情况的实时趋势图。
最后附上博主自己根据这篇博文做出来的效果图及代码:
@{
ViewBag.Title = "Example3";
}
<h2>Example3</h2>
<script src="~/js/jquery-1.6.1.js"></script>
<script src="~/js/highcharts-all.js"></script>
<script src="~/js/modules/exporting.js"></script>
<script type="text/javascript">
//1.0
//我们首先定义一个全局的图表对象，我们命名为chart，同时示例化Highcharts对象，具体见下面代码：
var chart;
var current_time=1;
//在横坐标中有时我们是需要指定坐标上每个坐标点需要显示的文字内容的，这时我们需要使用到一个categories属性，通过将一个数组值传给categories属性，这样在横坐标上的每个坐标点就会 按照指定的属性内容显示坐标点信息。为了实现如上目的，我们需要再设置一个变量，并将这个变量赋予categories属性
var x_arr = ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00',
'6:00', '7:00', '8:00', '9:00', '10:00', '11:00',
'12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
'18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
$(function () {
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 80,
events: {
load: loadTime
}
},
//通过title、subtitle指定图表的标题、子标题，见下面代码：
title: {
text: '大桥采集数据',
x: -20
},
subtitle: {
text: '传感器编号: 传感器1',
x: -20
},
// 通过xAxis、yAxis设定图表中横坐标、纵坐标的属性。
xAxis: {
title: {
enabled: true,
text: '时间（小时）'
},
//x_arr 在横坐标中有时我们是需要指定坐标上每个坐标点需要显示的文字内容的，这时我们需要使用到一个categories属性，通过将一个数组值传给categories属性，这样在横坐标上的每个坐标点就会按照指定的属性内容显示坐标点信息。为了实现如上目的，我们需要再设置一个变量，并将这个变量赋予categories属性。
//横坐标上就是按照我们在x_arr变量中设定的内容显示的。如果设定的内容少于横坐标的坐标点，则前面的坐标点将按x_arr变量中设定内容显示，后面的坐标点将按默认的坐标点信息显示。
categories: x_arr,
max: 23,
min: 0,
tickPixelInterval: 50
},
yAxis: {
title: {
text: '压力 (℃)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
//工程控制人员通过此曲线图可以知道每个时间点的最高温度情况，但是具体某个点温度是多少，工程人员希望通过将鼠标指向图表中采集点就可以展现出来。要实现这个功能，我们需要在chart对象中指定tooltip属性，
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y + '℃';
}
},
//legend 针对有些应用场合，我们在一个图表中将展示多个线条代表不同的含义，这时就需要通过图例来说明什么颜色线条代表什么含义，这种情况下就需要启用图例说明，要启用图例说明就必须通过如下属性进行配置
//只要使legend对象中的enabled属性设置为true就可以。设置为false，将不显示图例。
legend: {
x: -50,
y: 10,
enabled: true
},
exporting: {
enabled: false
},
plotOptions: {
line: {
gapSize: 100
}
},
series: [{
name: '最大值',
data: getFirstData()
}]
});
});
});
//2.0 现在我们需要模拟一些大桥传感器获得的数据，依据这些数据来显示曲线图。在这里我们首先要定义两个js函数，这三个函数就是模拟获取数据的，请看下面：
function loadTime() {
window.setTimeout(getData, 1000);
}
//上面这个函数就是我们在chart对象中设置events中的load事件指定的函数。在本函数中主要启动了一个定时器，在超过指定时间计秒后，将调用函数getData。
function getFirstData() {
var data = [];
var y_mx = Math.round(Math.random() * 10);
var i;
for (i = 0; i <= 0; i++) {
data.push({
x: current_time,
y: y_mx
});
if (current_time <= 23) {
current_time++;
}
}
return data;
}
// 这个函数是用来模拟初始化chart对象时，获得的大桥桥面温度值。其返回的是一个数组对象，数组中的每个对象包含x、y属性，这两个属性用来告诉chart对象x轴的某个坐标上面的y值是多少，并在此处显示一个坐标点，同时将连接相邻两个坐标点形成曲线。代码中的current_time是一个全局变量，用来对当前采集显示次数进行计数。
function getData() {
var current_x = x_arr[current_time];
//获取最大值
var series_mx = chart.series[0];
var y_mx = Math.round(Math.random() * 10);
series_mx.addPoint([current_time, y_mx], true, false);
current_time++;
if (current_time <= 23) {
window.setTimeout(getData, 1000);
}
}
//上面这个函数其它部分都很简单，关键的一个重点代码是
//series_mx.addPoint([current_time, y_mx], true, false);
//这一段，这段代码是在chart图表中加入一个新的坐标点。
//截至到目前，全部的代码就编写完成，现在运行它，就可以模拟出大桥桥面稳定24小时检测情况的实时趋势图。
</script>
<body>
<div id="container" style="min-width: 100px; height: 400px; margin: 0 auto"></div>
</body>
浙公网安备 33010602011771号