当数据更新时，HighChart Auto Pageup浏览器

Question

我发现了一个烦人的问题，即我的HighChart更新时，我的浏览器将自动页面。我已经搜索了解决方案(检查此链接(，他们解释说原因是关于调用new chart，但是在我的代码中，我不使用它。

html代码

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

JS代码

$(document).ready(function (){
	function read(){
		$.post("graph_power.php", 
		function(data, status){
		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);
		}
		});
	};
	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

图表。

只需将带有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/