Piechart不顯示商店數據

Question

我在sencha-touch中有一個餅圖，它不是從我的商店檢索數據，它是來自mysql數據庫的性別數據，數據正在使用ajax請求進行檢索，這裏是請求和商店

Ext.define('Qvidi.controller.MyController', { 
extend: 'Ext.app.Controller', 

config: { 
}, 

getGender: function() { 
    Ext.Ajax.request({ 
       method: 'POST', 
       params: { 
        class: 'Qvidi', 
        method: 'getDataM' 
       }, 
       url: 'server/index.php', 
       success: function(response){ 
        var r = Ext.decode(response.responseText); 
        Ext.getStore('GenderStore').setData(r.results); 
       } 
      }); 
} 

}）;

，這裏是商店

Ext.define('Qvidi.store.GenderStore', { 
extend: 'Ext.data.Store', 

requires: [ 
    'Qvidi.model.GenderModel', 
    'Ext.data.proxy.Ajax' 
], 

config: { 
    model: 'Qvidi.model.GenderModel', 
    storeId: 'GenderStore', 
    proxy: { 
     type: 'ajax', 
     extraParams: { 
      class: 'Qvidi', 
      method: 'getDataM' 
     }, 
     url: 'server/index.php' 
    } 
} 
}); 

，最後這裏是我的模型

Ext.define('Qvidi.model.GenderModel', { 
extend: 'Ext.data.Model', 

requires: [ 
    'Ext.data.Field' 
], 

config: { 
    fields: [ 
     { 
      name: 'types' 
     }, 
     { 
      name: 'counter' 
     } 
    ] 
} 
}); 

這裏是從日誌數據在谷歌瀏覽器檢查

---

同步的XMLHttpRequest的主線程由於對最終用戶的體驗有不利影響而不推薦使用。如需更多幫助，請查詢https://xhr.spec.whatwg.org/。

sencha-touch.js：13032鍵「minimum-ui」不被識別和忽略。 app.js：39載

Console.js _dc = 1456999436953：？35 [貶低] [匿名] loadData已過時，請使用添加或使用setData

---

的最近的記錄是我改變之後使用setData到loadData

，這裏是在我的方法檢索到SQL解碼以JSON

{ 
success: true, 
total: 2, 
results: [ 
{ 
types: "Male", 
counter: 2182 
}, 
{ 
types: "Females", 
counter: 1134 
} 
] 
} 

這是我的圖表代碼

{ 
          xtype: 'polar', 
          height: 377, 
          id: 'genderPieChart', 
          colors: [ 
           '#115fa6', 
           '#94ae0a', 
           '#a61120', 
           '#ff8809', 
           '#ffd13e', 
           '#a61187', 
           '#24ad9a', 
           '#7c7474', 
           '#a66111' 
          ], 
          store: 'GenderStore', 
          series: [ 
           { 
            type: 'pie', 
            colors: [ 
             '#115fa6', 
             '#94ae0a', 
             '#a61120', 
             '#ff8809', 
             '#ffd13e', 
             '#a61187', 
             '#24ad9a', 
             '#7c7474', 
             '#a66111' 
            ], 
            labelField: 'types', 
            xField: 'counter', 
            yField: 'types' 
           } 
          ], 
          interactions: [ 
           { 
            type: 'rotate' 
           } 
          ] 
         } 

這裏是我的PHP代碼

class Qvidi extends Connect { 
function __construct(){ 
    parent::__construct(); 
} 
public function getDataM($vars){ 
    $sql = "Select 'Male' as 'types', count(gender) AS 'counter' from quividi.vidireports where gender='1' 
      union 
      Select 'Females' as 'types', count(gender) AS 'counter' from quividi.vidireports where gender='2'"; 
    $data = array(); 

    $total = 0; 
    if($result = $vars->db->query($sql)) { 
     while($row = $result->fetch_assoc()){ 
      $data[] = array("types"=>$row["types"], "counter" => intval ($row["counter"])); 
      $total++; 
     } 
     $result->free(); 
    } 
    echo json_encode(array("success" => true, "total" => $total, "results" => $data)); 

} 

Answer 1

確定這樣：

我的PHP代碼

<?php 
$callback=false; 
if(isset($_REQUEST['callback'])) 
    $callback = $_REQUEST['callback']; 



$dati=array(
    (object) array('types'=> 'Male', 'counter'=> 2182), 
    (object) array('types'=> 'Female', 'counter'=> 1134) 
); 

$resultObj= new stdClass(); 
$resultObj->results=$dati; 
$resultObj->success=true; 
if ($callback) { 
    header('Content-Type: text/javascript'); 
    echo $callback . '(' . json_encode($resultObj) . ');'; 
}else { 
    echo json_encode($resultObj); 
} 

?> 

我的JSON響應：

{"results":[{"types":"Male","counter":2182},{"types":"Female","counter":1134}],"success":true} 

我的模型：

Ext.define('MyApp.model.GenderModel', { 
    extend: 'Ext.data.Model', 

    requires: [ 
     'Ext.data.field.Field' 
    ], 

    fields: [ 
     { 
      name: 'types' 
     }, 
     { 
      name: 'counter' 
     } 
    ] 
}); 

我的商店： 你會需要這些要求對店：

requires: [ 
     'Ext.data.Store', 
     'Ext.data.proxy.JsonP', 
     'Ext.data.reader.Json' 
    ] 


myStore: { 
      autoLoad: true, 
      model: 'MyApp.model.GenderModel', 
      proxy: { 
       type: 'jsonp', 
       url: 'myphpurl', 
       reader: { 
        type: 'json', 
        rootProperty: 'results' 
       } 
      } 
     } 

我的圖表：

{ 
      xtype: 'polar', 
      colors: [ 
       '#115fa6', 
       '#94ae0a', 
       '#a61120', 
       '#ff8809', 
       '#ffd13e', 
       '#a61187', 
       '#24ad9a', 
       '#7c7474', 
       '#a66111' 
      ], 
      bind: { 
       store: '{myStore}' 
      }, 
      series: [ 
       { 
        type: 'pie', 
        angleField: 'counter', 
        label: { 
         field: 'types', 
         display: 'rotate', 
         contrast: true, 
         font: '12px Arial' 
        }, 
        xField: 'counter', 
        yField: 'types' 
       } 
      ], 
      interactions: [ 
       { 
        type: 'rotate' 
       } 
      ] 
     } 

我最後的觀點：