如何使用 HighCharts 构建 Scada 警报答案

【问题标题】：How to build Scada Alerts using HighCharts如何使用 HighCharts 构建 Scada 警报
【发布时间】：2016-09-06 06:31:53
【问题描述】：

嘿，我需要将 zamel 代码转换为 JavaScript 代码。 zamel 的控制器之一，允许监控 Scada 警报。我有以下控制器：

这个控制器的工作方式：我们有 20 个警报，每个警报有 3 个状态：

正常状态 - 用绿色着色。
警报状态 - 以黄色显示。
危险状态 - 用红色表示。

我需要使用 Highcharts API 构建一个控制器，该控制器需要处理实时数据（实时更新）。控制器需要具有响应性和可折叠性。我可以使用 HighCharts API 实现这个目标吗，如果可以的话。对于构建此控制器的任何初步帮助，我都会很高兴。

【问题讨论】：

标签： javascript jquery html css highcharts

【解决方案1】：

我认为在您的情况下，最好的办法是使用简单的热图。它可以让您更改数据、调整图表大小、使用工具提示等。

您可以在这里找到可能对您有帮助的代码：

  $('#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)
        }
      }
    }]
  });

我使用了 3 个值：0 表示“正常”，0.5 表示“警告”，1 表示“危险”。

在这里你可以看到一个例子：http://jsfiddle.net/d7zt64v4/1/

【讨论】：

我可以禁用悬停效果，这样当我悬停每个方块时就看不到重点了吗？
在这种情况下您可以使用 enableMouseTracking。看这个例子：jsfiddle.net/d7zt64v4/3
非常好，非常感谢。最后一个问题 1. 我可以把它做成可折叠的吗，我需要这样的二十（20）个，这意味着很大的空间。 2.我可以改变每个正方形的大小吗？
可以使用drilldown并在drilldown上显示更多点，在这里您可以找到有关drilldown的信息：highcharts.com/docs/chart-concepts/drilldown您还可以添加不同大小的单元格的新系列：jsfiddle.net/d7zt64v4/4您可以还可以使用另一个主题的解决方案并通过渲染器手动添加您的单元格：stackoverflow.com/questions/39317791/…