HighCharts设置类别和系列使用JSON

Question

我想让我的高图表工作从我从Ajax（JSON）获得的数据，但我认为我必须失去一些东西。我试图通过循环，并把我需要到阵列，这样我可以把变量放到x轴类别和系列中添加的结果，但是当我运行它，我得到一个脚本错误：

A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue. 

Script: http://code.highcharts.com/stock/highstock.js:51 

这里是我的代码

<script type="text/javascript"> 

      $("#GetReport").click(function() { 

       var manufacturerId = 241; 
       var countryId = 230; 
       var startDate = '2013-01-09'; 
       var endDate = '2013-01-30'; 

       var theUrl = "/ProductStats/Parameters/" + manufacturerId + "/" + countryId + "/" + startDate + "/" + endDate; 

       $.ajax({ 
        type: "POST", 
        //contentType: "application/json; charset=utf-8", 
        url: theUrl, 
        data: { 'manufacturerId': manufacturerId, 'countryId': countryId, 'startDate': startDate, 'endDate': endDate }, 
        dataType: "json", 
        success: function (data) { 


         //see this http://stackoverflow.com/questions/11472947/how-to-format-my-json-data-for-stack-column-chart-in-highcharts 


         var WidgetNameArray = []; 

         var impressionsArray = []; 

         var intsArray = []; 

         alert(data.length); 

         for (var i = 0; i < data.length; i++) { 

          var item1 = data[i]; 

          var widgetCategories = item1.WidgetName; 

          //put into an array 
          WidgetNameArray.push(widgetCategories); 

          var imps = item1.Impressions; 

          impressionsArray.push(imps); 

          var ints = item1.Interactions; 

          intsArray.push(ints); 

         } 



         // Create the chart 
         $('#container').highcharts({ 
          chart: { 
           type: 'column' 
          }, 
          title: { 
           text: 'Inter Chart ' + startDate + ' to ' + endDate 
          }, 
          xAxis: { 
           categories: [WidgetNameArray] 
          }, 
          yAxis: { 
           min: 0, 
           title: { 
            text: 'Impressions/Interactions' 
           }, 
           stackLabels: { 
            enabled: true, 
            style: { 
             fontWeight: 'bold', 
             color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
            } 
           } 
          }, 
          legend: { 
           align: 'right', 
           x: -100, 
           verticalAlign: 'top', 
           y: 20, 
           floating: true, 
           backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', 
           borderColor: '#CCC', 
           borderWidth: 1, 
           shadow: false 
          }, 
          tooltip: { 
           formatter: function() { 
            return '<b>' + this.x + '</b><br/>' + 
         this.series.name + ': ' + this.y + '<br/>' + 
         'Total: ' + this.point.stackTotal; 
           } 
          }, 
          plotOptions: { 
           column: { 
            stacking: 'normal', 
            dataLabels: { 
             enabled: true, 
             color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
            } 
           } 
          }, 
          series: [{ 
           name: 'Impressions', 
           data: [impressionsArray] 
          }, { 
           name: 'Interactions', 
           data: [intsArray] 
          }] 
         }); 




         var table = document.getElementById("usertable"); 
         var tabledata = ""; 

         tabledata += "<tr>"; 
         tabledata += "<th>Widget Name</th>"; 
         tabledata += "<th>Impressions</th>"; 
         tabledata += "<th>Interactions</th>"; 
         tabledata += "<th>CTR</th>"; 
         tabledata += "</tr>"; 



         for (var i = 0; i < data.length; i++) { 

          var item = data[i]; 

          tabledata += "<tr>"; 
          tabledata += "<td>" + item.WidgetName + "</td>"; 
          tabledata += "<td>" + item.Impressions + "</td>"; 
          tabledata += "<td>" + item.Interactions + "</td>"; 
          tabledata += "<td>" + item.Ctr + "</td>"; 
          tabledata += "</tr>"; 

         } 


         table.innerHTML = tabledata; 

         $("th").css("background-color", "#3399FF"); 
         $("tr:even").css("background-color", "#eeeeee"); 
         $("tr:odd").css("background-color", "#ffffff"); 


        } 
       } 
       ); 


      }); 

     </script> 

这里是什么，我想达到的jsfiddle： http://jsfiddle.net/3hJYF/4/

所以我不知道问题是什么exectly。

我得到的阵列

WigetsNameArray: 

Dove/ThreeScroll,Dove/FourScroll,Dove/TwoByThree,Dove/OneByThree,OneByFour,OneByFive,Dove/ThreeByTwo,DoveBelliniFacebook/TwoByTwoStandard/UK,Dove-OneBySix,DoveYouTubeEmbed,Dove-OneBySix Phantom2,DoveYouTubeEmbeded,Dove One By Seven Bin 2,Dove three stage Bin 2 FaceBook,Dove One By Seven Bin 2 Facebook,Dove Two By Four UK 

impressionsArray: 

5568,5597,5670,4966,4612,5146,15403,12907,4008,105,146,40,0,0,0,0 

intsArray: 

64,76,78,29,46,50,864,198,52,4,2,0,0,0,0,0 

任何帮助，非常感谢！由于

Answer 1

data:[impressionsArray]是错误，只是给data: impressionsArray和同去与data: [intsArray]，这应是data: intsArray此外，categories: [WidgetNameArray]应categories: WidgetNameArray