ハートビートのライブチャート

Question

私はハートビートの値を表示するウェブサイトを構築したいです とその値はデータベースから取られているので、値は自動的に挿入されますので目標を達成するためにライブチャートが必要です私はJavaScriptも扱っていません。私はメモ帳++エディタを使っています ソースコードをコピーしたときに板張りスペースを使うと、 私は何をすればいいのか分かりません。私は実際に私の目的のためにライブチャートが必要です.HTMLのためだった、このコード

<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> 

を使用 これは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>