Highcharts 使用load事件时未呈现Highstock图表

我有一个Highstock图表，其中加载了一些默认数据。然后根据用户操作（单击按钮），我使用来自服务器的新数据重新绘制图表。我有一个从服务器检索数据的通用函数，我从图表的加载事件以及用户操作调用它。但是，图表不会在加载时渲染。当我尝试在某些用户操作上重新绘制图表时，它会正确地在导航区域中呈现图表，但不会在主图表区域中呈现。如果我将StockChart更改为simple HighChart，则该图表在用户单击时呈现良好效果，但在加载时呈现不好

有人能帮忙吗？谢谢

这是我的密码：

$(function(){

  // global to allow access to options when dynamically loading series.
  var statsChart;

  // global requestOptions, so that event handlers can just update
  // the specific option instead of building it again.
  var requestOptions = {
    'resolution': 'hourly' // default to an hour
  };

  var chart_options = {
    chart: {
        type: 'spline',
        renderTo: 'stats-chart-div',
        events:{
            load: updateChartData
        }
    },
    rangeSelector : {
        selected : 1,
        buttons : [{
            type: 'hour',
            count: 6,
            text: '6H'
        }, {
            type: 'day',
            count: 1,
            text: '1D'
        }, {
            type: 'day',
            count: 7,
            text: '1W'
        }, {
            type: 'week',
            count: 4,
            text: '1M'
        }, {
            type: 'month',
            count: 12,
            text: '1Y'
        }]
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: 'Stat Count'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    legend: {
        enabled: true,
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    exporting: {
        buttons: {
            hourlyButton: {
                x: -150,
                onclick: function () {
                    requestOptions['resolution'] = 'hourly';
                    updateChartData();
                },
                symbol: '',
                text: 'Hourly',
                theme: {
                    'stroke-width': 1,
                    'fill': '#808080',
                    'fill-opacity': 0.75
                },
                tooltip: {
                    text: 'Stats aggregated hourly'
                }
            },
            dailyButton: {
                id: 'daily',
                x: -100,
                onclick: function () {
                    requestOptions['resolution'] = 'daily';
                    updateChartData();
                },
                symbol: '',
                text: 'Daily',
                theme: {
                    'stroke-width': 1,
                    'fill': '#808080',
                    'fill-opacity': 0.75
                }
            },
            weeklyButton: {
                x: -40,
                onclick: function () {
                    requestOptions['resolution'] = 'weekly';
                    updateChartData();
                },
                symbol: '',
                text: 'Weekly',
                theme: {
                    'stroke-width': 1,
                    'fill': '#808080',
                    'fill-opacity': 0.75
                }
            }
        }
    },
    series : [
        {
            name: 'Average Stats',
            id: 'avg-stats',
            data: []
        }
    ]
  };
  var updateChartData = function() {
      fetchData(function(data){
         var series = statsChart.get('avg-stats');
         if (series) {
             series.setData(data['avg_stats'], false);
         }
         statsChart.redraw();
      }
  };

  var fetchData = function(callback) {
      $.getJSON('/index.php/getStats',
                requestOptions,
                function(data) {
                    statsData = JSON.parse(data.results);
                    callback(statsData);
                }
      );
  }
  statsChart = new Highcharts.StockChart(chart_options);
});

---

问题在于使用

startsChart

变量-未在加载事件中分配该变量。更改：

var updateChartData = function() {
  var sChart = this;
  fetchData(function(data){
     var series = sChart.get('avg-stats');
     if (series) {
         series.setData(data['avg_stats'], false);
     }
     sChart.redraw();
  }
};

---

通过使用以下代码，我能够解决这个问题。这对我来说似乎是一个黑客，如果有人能提出更好的解决方案，我将不胜感激

$(function(){

  // global to allow access to options when dynamically loading series.
  var statsChart;

  // global requestOptions, so that event handlers can just update
  // the specific option instead of building it again.
  var requestOptions = {
    'resolution': 'hourly' // default to an hour
  };

  var fetchData = function(callback) {
    $.getJSON('/index.php/getStats',
            requestOptions,
            function(data) {
                statsData = JSON.parse(data.results);
                callback(statsData);
            }
     );
  };

  var updateChartData = function() {
    fetchData(function(data){
       var series = statsChart.get('avg-stats');
       if (series) {
         series.setData(data['avg_stats'], false);
       }
       statsChart.redraw();
    }
  };

  fetchData(function(data){
     var chart_options = {
       chart: {
       type: 'spline',
       renderTo: 'stats-chart-div',
       },
       rangeSelector : {
         selected : 1,
         buttons : [{
           type: 'hour',
           count: 6,
           text: '6H'
       }, {
         type: 'day',
         count: 1,
         text: '1D'
       }, {
         type: 'day',
         count: 7,
         text: '1W'
       }, {
         type: 'week',
         count: 4,
         text: '1M'
       }, {
         type: 'month',
         count: 12,
         text: '1Y'
      }]
     },
     xAxis: {
       type: 'datetime'
     },
     yAxis: {
      title: {
        text: 'Stat Count'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    legend: {
      enabled: true,
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle'
    },
    exporting: {
      buttons: {
        hourlyButton: {
            x: -150,
            onclick: function () {
                requestOptions['resolution'] = 'hourly';
                updateChartData();
            },
            symbol: '',
            text: 'Hourly',
            theme: {
                'stroke-width': 1,
                'fill': '#808080',
                'fill-opacity': 0.75
            },
            tooltip: {
                text: 'Stats aggregated hourly'
            }
        },
        dailyButton: {
            id: 'daily',
            x: -100,
            onclick: function () {
                requestOptions['resolution'] = 'daily';
                updateChartData();
            },
            symbol: '',
            text: 'Daily',
            theme: {
                'stroke-width': 1,
                'fill': '#808080',
                'fill-opacity': 0.75
            }
        },
        weeklyButton: {
            x: -40,
            onclick: function () {
                requestOptions['resolution'] = 'weekly';
                updateChartData();
            },
            symbol: '',
            text: 'Weekly',
            theme: {
                'stroke-width': 1,
                'fill': '#808080',
                'fill-opacity': 0.75
            }
        }
      }
    },
    series : [
       {
        name: 'Average Stats',
        id: 'avg-stats',
        data: data['avg_stats']
      }
    ]
   };

   statsChart = new Highcharts.StockChart(chart_options);
  });
}

---

那没用。我得到了highcharts错误13，但我看到了图表轴、图例和导出按钮。另外，当再次调用updateChartData时，我得到了未捕获的TypeError:Object[Object global]没有方法“get”。我也试着把它改成这个.statsChart，然后我没有看到typeError，但我仍然看到highchart错误13。我猜如果renderTo配置不正确，我根本看不到任何图表属性。Highchart错误13是我的输入错误。图表仍然无法呈现。我还想添加一点，在我的原始代码中，我将在导航区域中看到图表，但在主图表区域中看不到，但加载事件根本不起作用。还有其他错误吗？您是否有带有该错误的实时站点？对我来说，这显然不是高图问题。没有其他错误。它不在公共网站上，所以我不能真正分享它。我已经能够用不同的方法解决这个问题，尽管我真的不太喜欢它。我现在没有使用load事件，我所做的是显式调用document ready上的fetchdata函数，并初始化该方法回调中的图表选项和图表？这很奇怪。您可以尝试在JSFIDLE上重现错误。