Question

我发现了一个恼人的问题，当我的高清图更新时，我的浏览器会自动进行翻页。我已经搜索了解决方案（Check this link），他们解释原因是关于调用new chart，但在我的代码中我没有使用它。

HTML CODE

<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

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/

更新数据时，Highchart会自动将浏览器页面化

1 个答案: