데이터가 업데이트 될 때 Highchart 자동 페이지 업 브라우저 사용

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 메서드는 차트를 다시 그리기 때문에 차트가 몇 초 동안 사라집니다.

CSS로 컨테이너 높이를 특정 값으로 설정하기 만하면됩니다.

[편집] 새로운 데이터를 얻을 때마다 코드가 전체 차트를 다시 작성한다는 점도 눈여겨볼 수 있습니다.이 접근법은 끔찍합니다. ```Highcharts.Chart```이, JQuery와 같은 레지스터를 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/