利用js的Highcharts图表库框架开发任务管理器动态交互式图表(包括曲线图和柱状图)WEB—HTML5页面显示
HignCharts介绍
Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。
官网跳转: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;
}())
}]
});