心跳現場圖

Question

球員我想建立一個網站，顯示心跳值 和這些值取自數據庫，所以這些值將自動插入，根據我需要實時圖表來實現目標，所以我搜索並找到了Highcharts網站，但是我從來沒有處理JavaScript也使用記事本+ +編輯器 當我複製源代碼我得到的是木板空間 我不知道該怎麼做，我真的需要活圖我的目的 我想告訴你，我使用該代碼

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> 
</div> 

這是對HTML 這對JavaScript

$(document).ready(function() { 
    Highcharts.setOptions({ 
    global: { 
     useUTC: false 
    } 
}); 

Highcharts.chart('container', { 
    chart: { 
     type: 'spline', 
     animation: Highcharts.svg, // don't animate in old IE 
     marginRight: 10, 
     events: { 
      load: function() { 

       // set up the updating of the chart each second 
       var series = this.series[0]; 
       setInterval(function() { 
        var x = (new Date()).getTime(), // current time 
         y = Math.random(); 
        series.addPoint([x, y], true, true); 
       }, 1000); 
      } 
     } 
    }, 
    title: { 
     text: 'Live random data' 
    }, 
    xAxis: { 
     type: 'datetime', 
     tickPixelInterval: 150 
    }, 
    yAxis: { 
     title: { 
      text: 'Value' 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }] 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>' + this.series.name + '</b><br/>' + 
       Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' 
+ 
       Highcharts.numberFormat(this.y, 2); 
     } 
    }, 
    legend: { 
     enabled: false 
    }, 
    exporting: { 
     enabled: false 
    }, 
    series: [{ 
     name: 'Heartbeats data', 
     data: (function() { 
      // generate an array of random data 
      var data = [], 
       time = (new Date()).getTime(), 
       i; 

      for (i = -19; i <= 0; i += 1) { 
       data.push({ 
        x: time + i * 1000, 
        y: Math.random() 
       }); 
      } 
      return data; 
     }()) 
    }] 
    }); 
}); 

我的問題是 1 - 我必須把HTML SRC？ 2-爲什麼它顯示木板空間，當我試圖在本地主機上運行它

Answer 1

我試了一下，它是爲我工作嘗試下面的代碼片段。

讓我知道如果這不能解決您的問題。

  $(document).ready(function() { 
 
       Highcharts.setOptions({ 
 
        global: { 
 
         useUTC: false 
 
        } 
 
       }); 
 

 
       Highcharts.chart('container', { 
 
        chart: { 
 
         type: 'spline', 
 
         animation: Highcharts.svg, // don't animate in old IE 
 
         marginRight: 10, 
 
         events: { 
 
          load: function() { 
 

 
           // set up the updating of the chart each second 
 
           var series = this.series[0]; 
 
           setInterval(function() { 
 
            var x = (new Date()).getTime(), // current time 
 
              y = Math.random(); 
 
            series.addPoint([x, y], true, true); 
 
           }, 1000); 
 
          } 
 
         } 
 
        }, 
 
        title: { 
 
         text: 'Live random data' 
 
        }, 
 
        xAxis: { 
 
         type: 'datetime', 
 
         tickPixelInterval: 150 
 
        }, 
 
        yAxis: { 
 
         title: { 
 
          text: 'Value' 
 
         }, 
 
         plotLines: [{ 
 
           value: 0, 
 
           width: 1, 
 
           color: '#808080' 
 
          }] 
 
        }, 
 
        tooltip: { 
 
         formatter: function() { 
 
          return '<b>' + this.series.name + '</b><br/>' + 
 
            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' 
 
            + 
 
            Highcharts.numberFormat(this.y, 2); 
 
         } 
 
        }, 
 
        legend: { 
 
         enabled: false 
 
        }, 
 
        exporting: { 
 
         enabled: false 
 
        }, 
 
        series: [{ 
 
          name: 'Heartbeats data', 
 
          data: (function() { 
 
           // generate an array of random data 
 
           var data = []; 
 
           var time = (new Date()).getTime(); 
 
           var i; 
 

 
           for (i = -19; i <= 0; i += 1) { 
 
            data.push({ 
 
             x: time + i * 1000, 
 
             y: Math.random() 
 
            }); 
 
           } 
 
           return data; 
 
          }()) 
 
         }] 
 
       }); 
 
      });

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
     <script src="https://code.highcharts.com/highcharts.js"></script> 
 
     <script src="https://code.highcharts.com/modules/exporting.js"></script> 
 
     
 
     
 
     <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> 
 
     </div>