Highcharts系列和类别不会从ajax请求动态添加

我正在研究highchart.I遇到了一个问题，我动态加载的类别数据和系列数据没有显示出来。这是我的代码。Highcharts系列和类别不会从ajax请求动态添加

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()。

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

来源

2013-07-17 Anish

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

来源

2013-07-17 08:50:11

谢谢您的回复！我已经尝试过你的解决方案。在ajax成功函数里面，我添加了这两行代码var chart = new Highcharts.Chart（）; \t \t \t \t chart.xAxis [0] .setCategories（categories，true）; chart.series [0] .setData（trend_series，true）; ..我已经把类别值推入类别数组。在这之后，它也不能正常工作。让我知道这是不是正确的。 – Anish

你可以为chart，categories和trend_series做一些console.log吗？你在上面的例子中声明的东西的方式似乎有点不正确，因为你在函数内部有一个jQuery初始化调用。通常情况相反。一个jsfiddle会很好。 –

当我做一个console.log（类别）里面的ajax函数，它给出了结果（我的意思是数值）。但是，当我在highchart函数内执行相同的console.log（类别）时，它显示的是空数组。有没有办法将该变量传递给highchart函数。我已经将该变量声明为全局变量。 – Anish

我结束了，即使它是有点怪异该解决方案，

我感动enitre 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']); 
     } 
     }); 
     }

要加载highchart

 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-17 09:51:19 Anish

是的，这是如何工作的 - 当数据来自AJAX时 - 创建图表。当创建图表而不是使用setCategories和addSeries时，您还可以升级代码 - 使用：'categories：categories'和serieS：[{name：'app Summary'，data：trend_series}]''。 –

会更好，如果你使用

$.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-17 11:10:50

Highcharts系列和类别不会从ajax请求动态添加

回答

相关问题