利用js的Highcharts图表库框架开发任务管理器动态交互式图表（包括曲线图和柱状图）

关注

原创最新推荐文章于 2025-04-15 21:30:00 发布 723 阅读 AI 写同款· GEO 优化 ›

highcharts动态获取数据生成柱状图 使用Highcharts控件实现柱状图，前端显示主要使用Highchartst图表库，后端使用SpringMVC框架从数据库获取数据，前后端数据交互采用Json数据格式，由于篇幅问题数据库代码就不提供了。主要代码如下： 1. 在页面头部引用Hightcharts文件阅读详情

利用js的Highcharts图表库框架开发任务管理器动态交互式图表（包括曲线图和柱状图）WEB—HTML5页面显示

HignCharts介绍
动态交互图
- 仿照windows任务管理器taskManager
- 源码

HignCharts介绍

Highcharts 是一个用纯 JavaScript 编写的一个图表库，能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。

Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。
大部分的图表类型在HignCharts中都有所包含
官网跳转：https://www.highcharts.com.cn/demo/highcharts
详细的API和使用方法可参考官网的相关内容

动态交互图

官网API文档中的动态交互图只有线图中的折线点图：

实时刷新的曲线图
基本动态交互图的js源码：

Highcharts.setOptions({
	global: {
		useUTC: false
	}
});
function activeLastPointToolip(chart) {
	var points = chart.series[0].points;
	chart.tooltip.refresh(points[points.length -1]);
}
var chart = Highcharts.chart('container', {
	chart: {
		type: 'spline',
		marginRight: 10,
		events: {
			load: function () {
				var series = this.series[0],
					chart = this;
				activeLastPointToolip(chart);
				setInterval(function () {
					var x = (new Date()).getTime(), // 当前时间
						y = Math.random();          // 随机值
					series.addPoint([x, y], true, true);
					activeLastPointToolip(chart);
				}, 1000);
			}
		}
	},
	title: {
		text: '动态模拟实时数据'
	},
	xAxis: {
		type: 'datetime',
		tickPixelInterval: 150
	},
	yAxis: {
		title: {
			text: null
		}
	},
	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
	},
	series: [{
		name: '随机数据',
		data: (function () {
			// 生成随机值
			var data = [],
				time = (new Date()).getTime(),
				i;
			for (i = -19; i <= 0; i += 1) {
				data.push({
					x: time + i * 1000,
					y: Math.random()
				});
			}
			return data;
		}())
	}]
});；

仿照windows任务管理器taskManager

在这里插入图片描述
主要开发的是操作系统性能相关的页面。主要包括Cpu任务的占用率，中断数量，丢失数量，响应数量，以及几个中断任务的内存分配和占用。

源码

container容器

<style type="text/css">
			#container {
				mid-width: 400px;
				mid-height: 400px;
				margin: 0 auto;
			}

			#container1 {
				mid-width: 400px;
				mid-height: 400px;
				margin: 0 auto;
			}

			#container2 {
				mid-width: 400px;
				mid-height: 400px;
				margin: 0 auto;
			}

			#container3 {
				mid-width: 400px;
				mid-height: 400px;
				margin: 0 auto;
			}

			#container4 {
				mid-width: 400px;
				mid-height: 400px;
				margin: 0 auto;
			}
		</style>

需js文件声明
commonTools.js文件中有需要访问服务器上的json文件

		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/taskManager_01.js"></script>
		<script src="js/highcharts.js"></script>
		<script src="js/exporting.js"></script>
		<script src="js/export-data.js"></script>
		<script src="js/themes/dark-unica.js"></script>
		<script src="js/commonTools.js"></script>

部分服务器端上的操作系统相关数据current.json文件
这是我的折线图和柱状图的源数据，是直接处理的json数据。
我们知道 Highcharts 的配置本身就是 JSON，所以 JSON 数据无需解析，只需要转换成需要的格式即可，下面是简单的示例说明：
读取 JSON 并创建图表
$(document).ready(function() {
var options = {
chart: {
type: ‘spline’
},
series: [{}]
};
$.getJSON(‘data.json’, function(data) {
options.series[0].data = data;
var chart = Highcharts.chart(‘container’, options);
});
});

"icInfo":{
	"masks":"4294967295",
	"gEnable":"1",
	"intAdded":"5667",
	"intLoss":"0",
	"intHandled":"5667",
	"stubs":[
		{   "id":"0","stub":"01f80000","cpuMask":"0","cpuID":"-1",
		   "intAdded":"1416","intLoss":"0","intHandled":"1416"},
		{   "id":"10","stub":"01f80040","cpuMask":"0","cpuID":"-1",
		   "intAdded":"1417","intLoss":"0","intHandled":"1417"},
		{   "id":"11","stub":"01f80080","cpuMask":"0","cpuID":"-1",
		   "intAdded":"1417","intLoss":"0","intHandled":"1417"},
		{   "id":"12","stub":"01f800c0","cpuMask":"0","cpuID":"-1",
		   "intAdded":"1417","intLoss":"0","intHandled":"1417"}]},
"hptInfo":{
	"start":"1715849123594",
	"current":"28334895",
	"rate":"1000000"},
"rtcInfo":{
	"nTick":"1416",
	"nCounter":"0",
	"counters":[]},
"nicInfo":[
	{
		"sendPkg":"0",
		"sendByte":"0",
		"sendErr":"0",
		"recvPkg":"0",
		"recvByte":"0",
		"recvErr":"0"},
	{
		"sendPkg":"23628",
		"sendByte":"1332224864",
		"sendErr":"113",
		"recvPkg":"30730",
		"recvByte":"2412766687",
		"recvErr":"219"},
	{
		"sendPkg":"26014",
		"sendByte":"1881765071",
		"sendErr":"160",
		"recvPkg":"32904",
		"recvByte":"1615629513",
		"recvErr":"19"},
	{
		"sendPkg":"29870",
		"sendByte":"1399598791",
		"sendErr":"137",
		"recvPkg":"28287",
		"recvByte":"2180040229",
		"recvErr":"192"},
	{
		"sendPkg":"22545",
		"sendByte":"1382468139",
		"sendErr":"61",
		"recvPkg":"27184",
		"recvByte":"1790326503",
		"recvErr":"143"}],

一个板块的数据折线图
主要是events中的function series数据列的x,y点值的赋值
以及series对象中的data.push();
基本动态图的动态效果都是通过定时器setInterval()实现
所以只需画点即可，柱状图也相同。

//折线图
	<div id="graphics1_cpu" class="graphics elected" style="background-color: azure">
							<div id="container"></div>
							<div id="chart"></div>
							<script type="text/javascript">
								Highcharts.chart('container', {
									chart: {
										type: 'spline',
										animation: Highcharts.svg, // don't animate in old IE
										marginRight: 10,
										events: {
											load: function() {
												var series = this.series[0];
												setInterval(function() {
													var x = (new Date()).getTime(), // current time
														y = task0Rate;
													series.addPoint([x, y], true, true);
												}, 1000);
											}
										}
									},

									time: {
										useUTC: false
									},

									title: {
										text: '任务0占用率'
									},
									xAxis: {
										type: 'datetime',
										// categories:['中断数量','中断响应数量','中断丢失数量'],
										tickPixelInterval: 150
									},
									yAxis: {
										title: {
											text: '占用率'
										},
										plotLines: [{
											value: 0,
											width: 1,
											color: '#808080'
										}]
									},
									tooltip: {
										headerFormat: '<b>{series.name}</b><br/>',
										pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
									},
									legend: {
										enabled: false
									},
									exporting: {
										enabled: false
									},
									plotLines: {
										enabled: false
									},
									series: [{
										name: '任务0占用率曲线',
										data: (function() {
											// generate an array of random data
											var data = [],
												time = (new Date()).getTime(),
												i;

											for (i = -19; i <= 0; i += 1) {
												data.push({
													x: time + i * 1000,
													y: null
												});
											}
											return data;
										}())
									}]
								});
							</script>
						</div>

//柱状图
Highcharts.chart('container8', {
									chart: {
										type: 'column',
										animation: Highcharts.svg, // don't animate in old IE
										marginRight: 10, //右边距
										events: {
											load: function() {
												// set up the updating of the chart each second
												var series1 = this.series[0];
												var series2 = this.series[1];
												setInterval(function() {
													var x = (new Date()).getTime(), // current time
														y1 = maxTask1Alloc,
														y2 = curTaks1Alloc
													series1.addPoint([x, y1], true, true);
													series2.addPoint([x, y2], true, true);
												}, 1000);
											}
										}
									},

									time: {
										useUTC: false
									},

									title: {
										text: 'Taks1-最大分配内存容量和当前占用内存容量',
									},

									subtitle: {
										text: 'FreeRTOS Monitor'
									},
									xAxis: {
										type: 'datetime',
										// categories:['中断数量','中断响应数量','中断丢失数量'],
										tickPixelInterval: 100
									},
									yAxis: {
										title: {
											text: '内存容量'
										},
										plotLines: [{
											value: 0,
											width: 1,
											color: '#808080'
										}]
									},
									tooltip: {
										headerFormat: '<b>{series.name}</b><br/>',
										pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
									},
									legend: {
										enabled: false
									},
									exporting: {
										enabled: false
									},
									plotLines: {
										enabled: false
									},
									series: [{
										type: 'column',
										name: '最大分配内存容量',
										data: (
											function() {
												var data = [],
													time = (new Date()).getTime(),
													i;
												for (i = -19; i <= 0; i += 1) {
													data.push({
														x: time + i * 1000,
														y: null
													});
												}
												return data;
											}())
									}, {
										type: 'column',
										name: '当前分配内存容量',
										data: (function() {
											var data = [],
												time = (new Date()).getTime(),
												i;
											for (i = -19; i <= 0; i += 1) {
												data.push({
													x: time + i * 1000,
													y: null
												});
											}
											return data;
										}())
									}]
								});