Как создать оповещения Scada с использованием HighCharts

Question

Привет, мне нужно преобразовать код ZAMEL в код JavaScript. Один из контроллеров zamel позволяет отслеживать предупреждения Scada. У меня есть следующий контроллер:

Путь этот контроллер работает: мы имеем 20 предупреждений на борту, каждый сигнал тревога имеет 3 состояния:

1. Ok State - цвет с зеленым.
2. Состояние предупреждения - цвет с желтым.
3. Опасное состояние - цвет с красным.

Мне нужно построить контроллер с использованием API Highcharts API. Контроллер должен иметь дело с данными в реальном времени (обновление в реальном времени). Контроллер должен быть отзывчивым и разборным. Могу ли я достичь этих целей с помощью API HighCharts, если да, то каким образом. Я был бы рад за любую начальную помощь в создании этого контроллера.

Answer 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/