HighChartsを使用してScadaアラートを構築する方法

Question

ちょっと、ザマークコードをJavaScriptコードに変換する必要があります。 zamelのコントローラの1つで、Scadaの警告を監視できます。私は、次のコントローラを持っている：

このコントローラが動作する方法： 我々はボード上の20回の警告を持って、各アラートは、3つの状態があります。

1. オクラホマ州 - 緑で色を。
2. 警告状態 - 黄色の色です。
3. 危険状態 - 赤色の色です。

ハイチャートAPIを使用してコントローラを構築する必要があります。コントローラはリアルタイムデータ（ライブで更新）を処理する必要があります。コントローラーは応答性と折りたたみ性が必要です。 HighCharts APIを使用してこの目標を達成することはできますか？ 私はこのコントローラーを構築する際の初期の援助がうれしいです。

Answer 1

あなたのケースでは、ヒントマップチャートを使用することをお勧めします。それはここであなたを助けるかもしれないコードを見つけることができるなどのツールチップを使用して、グラフのサイズを変更し、あなたに

のデータを変更する可能性を与える：

私は3つの値を使用している

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

：OK」の0を'、'警告 'は0.5、'危険 'は1です。ここで

あなたはそれが動作する方法の例を見ることができます：http://jsfiddle.net/d7zt64v4/1/