如何使用HighCharts构建Scada警报 [英] How to build Scada Alerts using HighCharts
问题描述
嘿,我需要将zamel代码转换为JavaScript代码。 zamel的控制器之一,可以监控Scada警报。我有以下控制器:
控制器的工作方式:
我们有20
$ b
- 确定状态 - 颜色为绿色。
- 警报状态 - 颜色为黄色。
- 危险状态 - 红色。
我需要使用Highcharts API构建控制器,控制器需要处理实时数据(在线更新)。控制器需要有响应和可折叠。
我可以使用HighCharts API实现这个目标吗?如果是这样的话。
我很乐意为构建这个控制器的初始帮助。
在这里你可以找到可以帮助你的代码:
$('#container')。highcharts({
图:{
type:'heatmap',
marginTop:40,
marginBottom:80,
},
xAxis:{
visible:false
},
yAxis:{
visible:false
},
标题:{
text:'示例'
},
colorAxis:{$
:[
[0,'green'],
[0.5,'green'],
[0.49,'yellow'],
[0.9,'黄色'],
[0.9,'红色']
],
分钟:0,
最多:1
},
图例:{
启用:false
},
系列:[{
borderWidth:10,
borderColor:'white',
keys:['x',' y','value','name'],
数据:[
[0,0,1,'name1'],
[0,1,0,'name2'],
[0,2,0.5,'name3'] ,
[0,3,0.5,'name4'],
[0,4,0,'name5'],
[1,0,1,'name6'],
[1,1,0,'name7'],
[1,2,1,'name8'],
[1,3,0,'name9'],
[1,4,0,'name10']
],
dataLabels:{
启用:true,
颜色:'#000000',
格式化程序:函数(){
return(this.key)
}
}
}]
});
我使用了3个值:'ok'为0,'alert'为0.5,''危险'。
在这里你可以看到一个例子:它是如何工作的: http://jsfiddle.net/d7zt64v4/1/
Hey I need to convert zamel code to JavaScript Code. One of the controllers of zamel, allows monitoring of Scada alerts. I have the following controller:
The way this controller works: we have 20 alerts on board, each alert has 3 states:
- Ok State - color with green.
- Alert state - color with yellow.
- Danger state - color with red.
I need to build a controller using Highcharts API, The controller need to deal with real time data(update on live). The controller need to be responsive and collapsible. Can I achieve this goals using HighCharts API , If so how. I would be glad for any initial help in build this controller.
I think that in your case the best idea will be to use simple heatmap chart. It will give you a possibility of changing the data, resizing the chart, using tooltip etc.
Here you can find code that may help you:
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
title: {
text: 'Example'
},
colorAxis: {
stops: [
[0, 'green'],
[0.5, 'green'],
[0.49, 'yellow'],
[0.9, 'yellow'],
[0.9, 'red']
],
min: 0,
max: 1
},
legend: {
enabled: false
},
series: [{
borderWidth: 10,
borderColor: 'white',
keys: ['x', 'y', 'value', 'name'],
data: [
[0, 0, 1, 'name1'],
[0, 1, 0, 'name2'],
[0, 2, 0.5, 'name3'],
[0, 3, 0.5, 'name4'],
[0, 4, 0, 'name5'],
[1, 0, 1, 'name6'],
[1, 1, 0, 'name7'],
[1, 2, 1, 'name8'],
[1, 3, 0, 'name9'],
[1, 4, 0, 'name10']
],
dataLabels: {
enabled: true,
color: '#000000',
formatter: function() {
return (this.key)
}
}
}]
});
I have used 3 values: 0 for 'ok', 0.5 for 'alert' and 1 for 'danger'.
Here you can see an example how it can work: http://jsfiddle.net/d7zt64v4/1/
这篇关于如何使用HighCharts构建Scada警报的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!