ハイチャート自動更新でデータが更新されたときにブラウザが表示される

Question

ハイチャートが更新されるとブラウザが自動的にページアップするという厄介な問題が見つかりました。私はすでに解決策（Check this link）を探して、その原因がnew chartを呼び出すことであると説明しますが、私のコードでは使用しません。

HTMLコード

<div class="gp_power"> 
     <div id="graph_power"></div> 
</div> 

JSコード

$(document).ready(function(){ 
 
\t function read(){ 
 
\t \t $.post("graph_power.php", 
 
\t \t function(data, status){ 
 
\t \t if(status == 'success'){ 
 

 
     cur_date = (data.cur_date.join(',')); 
 
     pow_dat_0000 = Number(data.pow_dat_0000.join(',')); 
 

 
     graph_power(cur_date, pow_dat_0000); 
 
\t \t } 
 
\t \t }); 
 
\t }; 
 
\t read(); 
 
    setInterval(function() { 
 
    if(new Date().getMinutes() % 1 == 0){ 
 
     if(new Date().getSeconds() == 0){ 
 
     read(); 
 
     } 
 
    } 
 
    }, 100) 
 

 
function graph_power(cur_date, pow_dat_0000) { 
 
     $('#graph_power').highcharts({ 
 
      chart: { 
 
       type: 'column', 
 
       margin: [ 50, 50, 100, 80] 
 
      }, 
 
      plotOptions: { 
 
       column: { 
 
        colorByPoint: true 
 
       } 
 
      }, 
 
      colors: [ 
 
       '#e74c3c', 
 
       '#3498db', 
 

 
      ], 
 
      title: { 
 
       text: 'Power Consumption of Today ' +'[ '+ '<b>' + cur_date + '</b>' + ' ]' 
 
      }, 
 
      xAxis: { 
 
       categories: ['00:00','00:30'], 
 
       labels: { 
 
        rotation: -45, 
 
        align: 'right', 
 
        style: { 
 
         fontSize: '9px', 
 
         fontFamily: 'Verdana, sans-serif' 
 
        } 
 
       } 
 
      }, 
 
      yAxis: { 
 
       min: 0, 
 
       title: { 
 
        text: 'Power (watt)' 
 
       } 
 
      }, 
 
      legend: { 
 
       enabled: false 
 
      }, 
 
      tooltip: { 
 
       formatter: function() { 
 
        return '<b>'+ this.x +'</b><br/>'+ 
 
         'Power: '+ Highcharts.numberFormat(this.y, 1) + 
 
         ' watt'; 
 
       } 
 
      }, 
 
      series: [{ 
 
       name: 'Watts', 
 
       data: [pow_dat_0000, pow_dat_0030], 
 

 
       dataLabels: { 
 
        enabled: true, 
 
        rotation: -90, 
 
        color: '#FFFFFF', 
 
        align: 'right', 
 
        x: 4, 
 
        y: 10, 
 
        style: { 
 
         fontSize: '0px', 
 
         fontFamily: 'Verdana, sans-serif' 
 
        } 
 
       } 
 
      }] 
 
     }); 
 
    }; 
 
});

私はこの問題を解決する助けてください。ありがとうございました:)

Answer 1

Chart.updateメソッドはグラフを再描画します。そのため、グラフは1秒ごとに消えます。

CSSでコンテナの高さを特定の値に設定するだけです。

[編集] また、新しいデータを取得するたびにコード全体が再作成されることに気付きました。このアプローチはひどいです。私はあなたのデータを更新する方法を示している例を作った：あなたは一種のjQueryのような新しい `` `Highcharts.Chart```、ソースコードを見て、どこhighchartsレジスタを使用

const options = { 
    chart: { 
    type: 'spline' 
    }, 
    title: { 
    text: 'Live Bitcoin Price' 
    }, 
    xAxis: { 
    type: 'datetime' 
    }, 
    yAxis: { 
    title: { 
     text: 'Price (USD)' 
    } 
    }, 
    legend: { 
    enabled: false 
    }, 
    exporting: { 
    enabled: false 
    }, 
    series: [{ 
    name: 'Live Bitcoint Price [USD]', 
    data: [] 
    }] 
} 
const chart = Highcharts.chart('container', options) 

// Data 
const getData =() => { 
    setInterval(() => { 
    window.fetch('https://api.cryptonator.com/api/ticker/btc-usd').then((response) => { 
     return response.json() 
    }).then((data) => { 
     chart.series[0].addPoint({ x: data.timestamp * 1000, y: Number(data.ticker.price) }) 
    }) 
    }, 3000) 
} 
getData() 

https://jsfiddle.net/xpfkx91w/