當數據更新時，Highchart自動調頁瀏覽器

我發現了當我的更新後，我的瀏覽器會自動調頁的煩人問題。我已經在尋找解決方案（Check this link），他們解釋說原因是關於調用new chart，但在我的代碼中我沒有使用它。當數據更新時，Highchart自動調頁瀏覽器

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' 
 
        } 
 
       } 
 
      }] 
 
     }); 
 
    }; 
 
});

請幫我解決這個問題。謝謝:)

來源

2017-04-19 Nothingnez

你有種使用新的'''Highcharts.Chart'''，看看源代碼，其中highcharts註冊爲一個jQuery插入。 http://code.highcharts.com/highcharts.src.js – stpoa

Chart.update方法重繪圖表，所以你的圖表消失一秒鐘。

只需使用CSS將容器高度設置爲特定值即可。

[編輯] 我也注意到，你的代碼每次獲得新數據時都會重新創建整個圖表，這種方法非常糟糕。我做這表明你應該如何更新數據的示例：

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/

來源

2017-04-19 11:23:19 stpoa

「只需使用CSS將容器高度設置爲特定值即可。」這很簡單，但可以解決問題。謝謝：） – Nothingnez

當數據更新時，Highchart自動調頁瀏覽器

回答

相關問題