延迟加载Highcharts'图表

我想知道是否有一种方法延缓加载页面加载Highcharts的图表。目前我的图表在页面打开时加载，导致我的代码崩溃，因为脚本没有足够的时间为图表获取数据。延迟加载Highcharts'图表

有谁知道如何解决这个问题？

2014-03-18 benandrews54

如果加载从外部数据源，你应该在的功能，做到这一点的回调初始化图表。 –

如果我这样做，然后我得到错误“TypeError：$（...）。highcharts是不是一个函数”Highcharts肯定是正确初始化，因为我看到它以前工作。 – benandrews54

请复制您的示例作为现场演示。 –

有几种方法可以做到这一点。一个是当收到数据初始化图表（使用jQuery交例如，数据看起来像[5,6,8,11]）：

$(function(){ 
    $.post('test_highchart.asp', {actn:'load-data'}, function(dat){ 
     $('#chart').highcharts({ 
      chart: { 
       type: 'bar' 
      }, 
      title: { 
       text: 'Delayed Loading' 
      }, 
      xAxis: { 
       title: { 
        text: 'Values' 
       } 
      }, 
      series:[{ 
       name: 'value', 
       data: dat 
      }] 
     }); 
    }, 'json'); 
});

或者，可以初始化负载图表然后泵送数据到当你得到它的图表（数据再次貌似[5,6,8,11]）：

$(function(){ 
    window.chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'chart', 
      type: 'bar' 
     }, 
     title: { 
      text: 'Delayed Loading' 
     }, 
     xAxis: { 
      title: { 
       text: 'Values' 
      } 
     }, 
     series:[{ 
      name: 'values', 
      id: 'series1', 
      data: [] 
     }] 
    }); 

    // load data: 
    $.post('test_highchart.asp', {actn:'load-data'}, function(dat){ 
     $.each(dat, function (val) { 
      // add points to chart: 
      window.chart.get('series1').addPoint(val); 
     }); 
    }, 'json'); 
});

检查http://www.highcharts.com/docs/working-with-data/live-data了解详情。

欢呼

来源

2015-03-20 19:31:14

延迟加载Highcharts'图表

回答

相关问题