在 getJSON 调用中使用 highcharts 的 addChart 函数（循环多个本地文件）

Question

我真的被困在这里，试图了解 highcharts 与 getjson 和 javascript 循环的结合（这是上一个问题的后续 - How to generate highcharts chart from multiple local json files）。

基本上我正在尝试创建一个包含多个类别和系列的 highcharts 条形图。我有许多本地 json 文件，每个文件都包含不同信息的数量。我想遍历每个类别文件，读取计数并将结果添加到该特定系列（然后绘制它）。我在循环文件的循环中使用 $.getJSON（我想我现在可以通过将它包装在一个函数中来实现它（参见下面的代码））。但是，我也尝试使用 highchart 的 'chart.addSeries' 将每个新系列添加到图表中（即代码中的 seriescount）。我目前对其进行编码的方式意味着我需要从 getJSON 调用中返回 seriescount - 我知道这是不正确的，而是应该在 getJSON 调用中进行进一步处理。这就是我被卡住的部分 - 我不确定如何处理在 getJSON 调用中添加新系列作为不断增加的多个系列的一部分。

我希望以上内容有意义，如果不是，代码本身可能会有所帮助。

（只是补充一点，大部分代码似乎按预期工作 - 这是我无法弄清楚的最后一部分）

感谢您的建议。

$(document).ready(function() {

  var options = {
  // standard highcharts options set here....
         series: []
  };

  //the series to loop through              
  var fileTypes = new Array('SeriesTypeA', 
                    'SeriesTypeB');

  //the categories to loop through                                      
  var mfiles = new Array('/assets/Cat1.json',
                 '/assets/Cat2.json',
                 '/assets/Cat3.json',
                 '/assets/Cat4.json',
                 '/assets/Cat5.json',
                 '/assets/Cat6.json',
                 '/assets/Cat7.json');

  //plot the initial empty chart              
  var chart = new Highcharts.Chart(options);


  //Loop over the different files and do a count for each
  for (var i=0; i<fileTypes.length; i++) {  
      var seriescount = [];
      for (var j=0; j < mfiles.length; j++) {

          (function(i, j, seriescount){   //force the local i and j
              $.getJSON(mfiles[j], function(data) {
                  // get the count of files
                  var count = 0;
                  var index = 0;
                  var entry;
                  for (index = 0; index < data.length; ++index) {
                      entry = data[index];
                      if (entry.file_processing_status == fileTypes[i]) {
                          count ++;
                      }
                  };
                  seriescount.push(count);
                  return seriescount; //This is not correct
              }); 

          })(i, j, seriescount);
      }

      //add the results to make a new series               
      chart.addSeries({                        
          name: fileTypes[i],
          data: seriescount   //as expected I don't get seriescount at this stage
      }, false);            
  };

  //and now redraw the final chart          
  chart.redraw();

});

Answer 1

令人不安的是，这行：$.getJSON(mfiles[j], function(data) { - 这意味着您正在为每个系列（for 和 i 变量）加载相同的文件。对我来说这很奇怪。

现在关于解决方案，每个系列都有固定数量的类别，对吧？它在mfiles.length 变量中。您可以增加一些计数器，并添加它（在您的 getJSON 回调中）：

if(categoryCounter == mfiles.length){ 
  chart.addSeries(series);
}