Highstock 데이터 업데이트해서 getJSON

내가 자바 스크립트에 새로 온 다음과 같은 코드 작업 있어요 : 지금 하나 개의 차트에 그래프를 모두 싶어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>

을하고 분마다 업데이트해야합니다. 순간에는 두 개의 PHP 스크립트가 있습니다. 하나는 [타임 스탬프, 온도]이고, 다른 하나는 [타임 스탬프, 습도]입니다.

여기에서 찾은 몇 가지 코드 스 니펫을 시도했지만, 현재 자바 지식이 없기 때문에 내 필요에 맞게 변경할 수 없습니다.

누군가 내가 시도해야 할 힌트를 주거나, 내가해야 할 일을 설명 할 수있는 곳을 찾을 수 있습니까?

미리 감사드립니다.

출처

2016-11-03 Raphael Schmidt

당신이 선택한대로 매 간격으로 자바 스크립트를 실행하려면 setInterval()을 사용하십시오.

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

좋은 튜토리얼은 어떻게하는지 알게하는 것입니다. 현재 자바 스크립트 지식에서 할 수있는 휴식이 되길 바랍니다. 현재 두 함수의 이름을 setInterval 함수 내에 정의 된 다른 함수 내에서 실행하십시오.

두 차트를 서로 겹쳐서 그리려면 HighChart에 2 차원 배열로 전달하십시오. http://www.highcharts.com/demo 에는 많은 예제가 포함되어 있으며이를 따라갈 수 있습니다.

예를 들어 그래프를 그리는 코드가있는 함수에 배열을 전달한 다음 해당 변수를 사용하여 계열에 값을 부여하십시오. 만약 X 축에서 유한 값을 표시 할 경우, 다음

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 

    });

, 어레이로서 data_input 가변적 X_AXIS 다른 데이터 배열을 전송. 변수 x_axis를 무시하지 않고 배열을 data_input에 전달하면됩니다. 모든 그래프 제목 (습도, tempreture의)와

 data_input[i]['data']

에 데이터가 포함되어 있어야

 data_input[i]['name']

에 있는지 확인합니다. i는 각 그래프의 번호입니다.

희망이 도움이됩니다.

출처

2016-11-03 11:32:07 Wenuka

Highstock 데이터 업데이트해서 getJSON

답변

관련 문제