本文介绍如何使用纯JavaScript类库Highcharts在JSP页面中实现动态曲线图表。通过引入核心JS文件及jQuery，利用chart对象的events属性调用addPoint方法，以双维数组格式实时刷新数据点，实现类似官网demo的动态更新效果。
Highcharts核心特性介绍
Highcharts是一个用于制作图表的纯JavaScript类库。
其主要特性包括以下几个方面：
兼容性：支持当今所有主流浏览器，涵盖iPhone、IE及Firefox等。
个人用户完全免费使用。
纯JavaScript实现，无需服务器端支持（无BS架构依赖）。
支持多种图表类型，包括直线图、曲线图、区域图、区域曲线图、柱状图、饼图及散布图。
跨语言兼容：无论后端使用PHP、.net还是Java均可调用，仅需三个文件。
所需文件包括Highcharts核心文件、IE的Canvas模拟器以及jQuery或MooTools类库。
具备提示功能：鼠标悬停在图表数据点上时显示提示信息。
支持放大功能：可选中图表部分进行放大，以便近距离观察细节。
易用性强：无需特殊开发技能，仅需配置选项即可生成定制图表。
时间轴精度可达毫秒级。
官方网站地址为：http://www.highcharts.com/。
官网提供示例和参考代码，可据此开发应用；若仅需静态图形展示，使用过程非常简便。
动态曲线应用实现
参考官网示例，本文演示如何实现动态曲线应用。
实现效果如下：
该曲线为动态更新，官网演示地址为：http://www.highcharts.com/demo/dynamic-update。
将其应用于JSP页面的代码如下：
JSP集成代码示例
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>Highcharts Example</title>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="highcharts.js"></script>
<script language="javascript" type="text/javascript" src="exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: '<b>Java小强制作</b>'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: '单位：M'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
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
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px;height: 400px"></div>
</body>
</html>DIV样式可根据需求自行调整，需重点关注以下两点：
数据格式必须为双维数组。
数据更新机制依赖于chart对象中的events属性，通过定义方法调用addPoint来实现数据点的增加与刷新。
以上为本文全部内容，希望对读者学习有所帮助，欢迎支持本站。