Question

我有一张Highstock图表，其中包含一些默认数据。然后根据用户操作（按钮单击），我使用服务器中的新数据重绘图表。我有一个通用的功能来从服务器检索数据，我从图表的加载事件以及用户操作调用它。但是，图表不会在加载时呈现。当我尝试在某些用户操作上重绘图表时，它会在导航区域中正确呈现图表，但不会在主图表区域中呈现。如果我将StockChart更改为简单的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);
});

Answer 1

问题在于使用startsChart变量 - 它未在load事件中分配。变化：

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();
  }
};

Answer 2

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

$(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);
  });
}

使用load事件时不会呈现Highstock图表

2 个答案: