Highstock更新数据的getJSON

我是新来的Javascript，得到了下面的代码工作：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脚本。一个用于[时间戳，温度]，另一个用于[时间戳，湿度]。

我尝试了几个我在这里找到的代码片段，但由于我没有现在的Javascript知识，我无法将其更改为我的需要。

有人可以给我一个提示，我应该尝试什么，或者我可以在哪里找到解释我必须做的事情？

预先感谢您。

来源

2016-11-03 Raphael Schmidt

使用setInterval（）按照您选择的每个时间间隔运行您的JavaScript。

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

是一个很好的教程来了解它是如何做。我希望您可以从您当前的JavaScript知识中完成休息。命名当前的两个函数，在setInterval函数内定义的另一个函数内运行它。

如果你想绘制两个图表在彼此之上，把它作为一个二维数组传递给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轴的有限值，发送数组变量X_AXIS和其它数据data_input作为数组。如果不只是忽略变量x_axis并将数组传递给data_input。确保在

 data_input[i]['name']

应包含所有图形的标题（湿度，Tempreture）和

 data_input[i]['data']

包含数据。我是每个图的数字。

希望这会有所帮助。

来源

2016-11-03 11:32:07 Wenuka

Highstock更新数据的getJSON

回答

相关问题