2016-03-03 45 views
0

我在sencha-touch中有一个饼图,它不是从我的商店检索数据,它是来自mysql数据库的性别数据,数据正在使用ajax请求进行检索,这里是请求和商店Piechart不显示商店数据

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)); 

} 
+0

结果是否正确? –

+0

来自我的PHP文件的结果是正确的,数据正在被正确检索,有两个数据字段来自查询它是类型,是男性还是女性,另一个字段是计数器,即男性的数量和女性。 –

+0

类型是一个字符串,计数器存储为一个int值 –

回答

0

确定这样:

我的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' 
       } 
      ] 
     } 

我最后的观点:

screenshot

+0

Theres没有改变饼图,在控制台中没有任何错误,但就像我说没有变化,这个饼图甚至不再可见 –

+0

你可以尝试加载sencha小提琴吗? –

+0

如果你不能手动执行Ajax请求设置r.result值的示例值 –