2016-11-03 12 views
1

私はJavaScriptに新たなんだと、次のコードの作業だ:私は今、1つのチャートへのグラフの両方を取得したいHighstock更新データgetJson

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Temperatur</title> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <style type="text/css"> 
${demo.css} 
     </style> 
     <script type="text/javascript"> 

$(function() { 

    $.getJSON('sqltojson.php', function (data) { 
     // Create the chart 
     $('#container').highcharts('StockChart', { 


      rangeSelector: { 

       allButtonsEnabled: true, 
       buttons: [{ 
        type: 'minute', 
        count: 60, 
        text: 'hour', 
        dataGrouping: { 
         forced: true, 
         units: [['minute', [1]]] 
        } 
       }, { 
        type: 'minute', 
        count: 360, 
        text: '6 hour', 
        dataGrouping: { 
         forced: true, 
         units: [['minute', [1]]] 
        } 
       }, { 
        type: 'all', 
        text: 'all', 
        dataGrouping: { 
         forced: true, 
         units: [['minute', [1]]] 
        } 
       }], 
       buttonTheme: { 
        width: 60 
       }, 
       selected: 0 
      }, 

      title: { 
       text: 'Temperatur' 
      }, 

      series: [{ 
       name: 'Temperatur', 
       type: 'spline', 
       data: data, 
       color: '#0000FF', 
       tooltip: { 
        valueSuffix: '°C' 
       } 

      }] 
     }); 
    }); 

}); 
$(function() { 

    $.getJSON('sqltojson2.php', function (data) { 
     // Create the chart 
     $('#container2').highcharts('StockChart', { 


      rangeSelector: { 

       allButtonsEnabled: true, 
       buttons: [{ 
        type: 'minute', 
        count: 60, 
        text: 'hour', 
        dataGrouping: { 
         forced: true, 
         units: [['minute', [1]]] 
        } 
       }, { 
        type: 'minute', 
        count: 360, 
        text: '6 hour', 
        dataGrouping: { 
         forced: true, 
         units: [['minute', [1]]] 
        } 
       }, { 
        type: 'all', 
        text: 'all', 
        dataGrouping: { 
         forced: true, 
         units: [['minute', [1]]] 
        } 
       }], 
       buttonTheme: { 
        width: 60 
       }, 
       selected: 0 
      }, 

      title: { 
       text: 'Luftfeuchte' 
      }, 

      series: [{ 
       name: 'Luftfeuchte', 
     type: 'spline', 
       data: data, 
       color: '#FF0000', 
       tooltip: { 
        valueSuffix: '%' 
       } 
      }] 
     }); 
    }); 

}); 
     </script> 
    </head> 
    <body> 
<script src="https://code.highcharts.com/stock/highstock.js"></script> 
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 

<div id="container" style="height: 400px; min-width: 310px"></div> 
<div id="container2" style="height: 400px; min-width: 310px"></div> 
    </body> 
</html> 

を、そしてそれは毎分を更新しなければなりません。 私は2つのPHPスクリプトを持っています。 1つは[タイムスタンプ、温度]、[時間]は[タイムスタンプ、湿度]です。

ここで見つけたいくつかのコードスニペットを試しましたが、現在のJavascript知識がないため、私のニーズに変更できませんでした。

誰かが私に何を試してほしいか、または私が何をしなければならないかを説明する何かを見つけることができるでしょうか?

ありがとうございます。

答えて

2

setInterval()を使用して、選択した時間間隔ごとにjavascriptを実行します。

http://www.w3schools.com/jsref/met_win_setinterval.asp

どのように行うの知るための良いチュートリアルです。 私はあなたの現在のjavascriptの知識からできることを願っています。現在の2つの関数に名前をつけ、setInterval関数内で定義された別の関数の中で実行します。

2つのチャートを重ねて描画する場合は、2次元配列としてHighChartに渡します。 http://www.highcharts.com/demo にはたくさんの例があり、それに従うことができます。

たとえば、グラフを描画するコードを含む関数に配列を渡し、その変数を使用して系列に値を与えます。ここで

function draw_first_chart(div_id,x_axis,data_input) 
{ 
    $(div_id).highcharts({ 
     chart: { 
     // ..// 
    }, 
     title: { 
      // ..// 
     }, 

     xAxis: { 
      // ..// 
      }, 
      categories: x_axis 
     }, 
     yAxis: { 
      // ..// 

     }, 
     tooltip: { 
      // ..// 
     }, 
     legend: { 
      // ..// 
     }, 
     series: data_input 

    }); 

あなたはx軸に有限の値を表示したい場合は、配列としてdata_inputする変数X_AXISやその他のデータに配列を送信します。変数x_axisを無視して配列をdata_inputに渡すだけではない場合すべてのグラフのタイトル(湿度、Tempreture)と

 data_input[i]['data'] 

にデータが含まれているが含まれている必要があり

 data_input[i]['name'] 

で確認してください。 iは各グラフの番号です。

これが役に立ちます。