爲什麼jqPlot顯示通過AJAX檢索數據的錯誤餅圖？

Question

我正在開發一個應用程序，其中我使用jqPlot來繪製使用通過AJAX檢索的一些數據的餅圖。但是，我注意到由此產生的餅圖是錯誤的。 當我手動將數據放入數組中時，餅圖是正確的。

這是我的代碼的一部分。

$.ajax({ 
    url:'http://localhost/mijson.php', 
    dataType:'json', 
    async:false, 
    success:function(data){ 
     for(a in data){ 
      var div_pintar = "<div id='divgrafica"+a+"' class='myChart'></div>"; 
      $("#espacio_graficas").append(div_pintar); 
      var datos_tmp = []; 
      datos_tmp.push(['Ok',data[a]['ok']]); 
      datos_tmp.push(['Fail',data[a]['fail']]); 

      $.jqplot('divgrafica'+a, [datos_tmp], { 
       title:data[a]['label'] , 
       seriesDefaults:{ 
        renderer:$.jqplot.PieRenderer, 
        trendline:{ show: true }, 
       }, 
       legend:{ show: true } 
      }); 
      ... 

我得到的JSON是這樣的：

[{"label":"FECHA","requer":56,"ok":28,"fail":28}, 
{"label":"TTM Y FECHA","requer":35,"ok":8,"fail":27}] 

總之，它讓我看到一個餅圖，例如，有兩個值，但增加了14％。

... 
    plo12 = $.jqplot('pieChart2', jsonurl,{ 
     title: 'AJAX JSON Data Renderer', 
     dataRenderer: ajaxDataRenderer, 
     seriesDefaults: { 
      renderer: $.jqplot.PieRenderer, 
      rendererOptions: { 
       showDataLabels: true 
      } 
     }, 
     legend: { show: true, location: 'e' } 
    }); 
    ... 

Answer 1

感謝Makyen誰幫我，但他的回答是不錯的，錯誤仍然存​​在。 經過16個小時的努力，我找到了解決方案，這非常非常簡單。

..... 
    var div_pintar = "<div id='divgrafica"+index+"' class='myChart'></div>"; 
       $("#espacio_graficas").append(div_pintar); 
       var datos_tmp = []; 
        datos_tmp.push(['Ok',parseInt(datos[a]['ok'])]); 
        datos_tmp.push(['Fail',parseInt(datos[a]['fail'])]); 
    ...... 

只有從JavaScript parseInt函數

功能我希望這可以幫助其他人。 我失去了好幾個小時:(

Answer 2

沒有更多的信息，很難確定問題到底是什麼：

同樣的，如果我用ajaxDataRenderer發生。

但是，這會導致錯誤的圖表中最明顯的一點就是使用：

for(a in data){ 

解析JSON object，這實際上是一個array，已經由AJAX success:function返回：

$.ajax({ 
    success:function(data){ 

引述"for...in" page on MDN：

數組迭代和for ...在
注意：for..in不應用於迭代索引順序非常重要的數組。

數組索引只是具有整型名稱的可枚舉屬性，其他方面與通用對象屬性相同。有不能保證... ...將以任何特定的順序返回索引和它將返回所有可枚舉的屬性，包括那些非整數名稱和那些被繼承的。

由於迭代的順序與實現有關，迭代數組可能無法以一致的順序訪問元素。因此，在遍歷訪問順序非常重要的數組上進行迭代時，最好使用帶有數字索引（或Array.forEach或for ... of循環）的for循環。

在這種情況下，順序很重要，因爲無論瀏覽器被使用，您都希望圖表的顯示順序相同。因此，您應該以確定性的方式處理數組的成員。

更重要的是：

遍歷自身的屬性只有

如果你只需要考慮附加到對象本身的屬性，而不是它的原型，使用getOwnPropertyNames或執行hasOwnProperty檢查（也可以使用propertyIsEnumerable）。或者，如果您知道不會有任何外部代碼干擾，則可以使用檢查方法擴展內置原型。

每個數組的屬性都與其原型相關，而不僅僅是數組的成員。包括這些在你的處理中，通過使用for(a in data){}，沒有任何資格，幾乎保證會導致錯誤的顯示。

一種替代方法來編寫你有什麼是使用forEach()：

$.ajax({ 
    url:'http://localhost/mijson.php', 
    dataType:'json', 
    async:false, 
    success:function(data){ 
     data.forEach(function(curObject, a) { 
      var div_pintar = "<div id='divgrafica"+a+"' class='myChart'></div>"; 
      $("#espacio_graficas").append(div_pintar); 
      var datos_tmp = []; 
      datos_tmp.push(['Ok',data[a]['ok']]); 
      datos_tmp.push(['Fail',data[a]['fail']]); 

      $.jqplot('divgrafica'+a, [datos_tmp], { 
       title:data[a]['label'] , 
       seriesDefaults:{ 
        renderer:$.jqplot.PieRenderer, 
        trendline:{ show: true }, 
       }, 
       legend:{ show: true } 
      }); 
      ... 

注：我通常會改變所有的data[a]引用curObject，但不這樣做就可以了（數組索引傳入作爲a），並導致您的代碼變化最小。由於不需要多次執行數組查找，因此進行其他更改應該使代碼稍微快一點。

這些變化，並使用更具描述性index代替a，代碼如下：

$.ajax({ 
    url:'http://localhost/mijson.php', 
    dataType:'json', 
    async:false, 
    success:function(data){ 
     data.forEach(function(curObject, index) { 
      var div_pintar = "<div id='divgrafica"+index+"' class='myChart'></div>"; 
      $("#espacio_graficas").append(div_pintar); 
      var datos_tmp = []; 
      datos_tmp.push(['Ok',curObject['ok']]); 
      datos_tmp.push(['Fail',curObject['fail']]); 

      $.jqplot('divgrafica'+index, [datos_tmp], { 
       title:curObject['label'] , 
       seriesDefaults:{ 
        renderer:$.jqplot.PieRenderer, 
        trendline:{ show: true }, 
       }, 
       legend:{ show: true } 
      }); 
      ...