0

我正在研究 highchart。我遇到了一个问题，我动态加载的类别数据和系列数据没有显示出来。这是我的代码。

    function loadChart() {              
        var categories = [];    
        var trend_series = [];
        $.ajax({
            type:'POST',
        url : '/trends.php',
        dataType: 'json',
        async : 'false',
            data: { date: d, item_name: item },
        success: function( data ) {
            $.each( data, function( key, val ) {
            categories.push( key );
            trend_series.push( parseFloat( val ) );
            });
            },
        error: function( data ) {               
            //alert(data['responseText']);
        }
        });

        $( function () {
        var chart = new Highcharts.Chart({
           chart: {
              renderTo: 'container',
              type: 'line'                    
               },                           
           xAxis: {
              categories: {}
           },

               series: [{
              data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
           }]
             });

             chart.xAxis[0].setCategories( categories );
            chart.addSeries({
            name: 'App Summary',
            data:  trend_series       
            });
         });
        }

我正在loadChart()从另一个文件中调用。

我注意到的主要问题之一是类别和趋势系列（这些是数组）在 highchart 函数中是空的。但在 ajax 函数调用中它不是空的。如何将这些值传递给 highchart 函数，或者是否有任何其他方法可以实现这一点。

4

3 回答 3

0

我最终得到了这个解决方案，即使它有点奇怪，

我将整个 highchart 函数移动到另一个函数。在 ajax 成功函数上，我正在调用下一个函数renderChart()。代码如下。

function loadChart() {              
      categories = [];    
      trend_series = [];

        $.ajax({
            type:'POST',
        url : '/trends.php',
        dataType: 'json',
        async : 'false',
            data: { date: d, item_name: item },
        success: function( data ) {
            $.each( data, function( key, val ) {
            categories.push( key );
            trend_series.push( parseFloat( val ) );
            });
            renderChart(categories,trend_series);
            },
        error: function( data ) {               
            //alert(data['responseText']);
        }
        });
        }

加载高图

      function renderChart(categories,trend_series){
        var chart = new Highcharts.Chart({
           chart: {
              renderTo: 'container',
              type: 'line'                    
               },                           
           xAxis: {
              categories: {}
           },

               series: {}
           }]
             });

             chart.xAxis[0].setCategories( categories );
            chart.addSeries({
            name: 'App Summary',
            data:  trend_series       
           });   
  }
于 2013-07-17T09:51:19.717 回答
0

您正在修改类别和数据，但图表无法收到通知。您需要在 ajax 调用的成功函数中执行 categories.push() 然后chart.xAxis[0].setCategories(categories,true)再次重做，并且与数据相同。chart.series[0].setData(trend_series,true)该true选项触发 chart.redraw()

于 2013-07-17T08:50:11.753 回答
0

如果你使用会更好

$.ajax({
            type:'POST',
        url : '/trends.php',
        dataType: 'json',
        async : 'false',
            data: { date: d, item_name: item },
        success: function( data ) {

var options = {
   chart: {
              renderTo: 'container',
              type: 'line'                    
               },                           
           xAxis: {
              categories: []
           },
    series:{
data:[]
}

}

            $.each( data, function( key, val ) {
            options.xAxis.categories.push(key);
            options.series.data.push( parseFloat( val ) );
});

var chart = new Highcharts.Chart(options);

            },
        error: function( data ) {               
            //alert(data['responseText']);
        }
        });
于 2013-07-17T11:10:50.317 回答