Piechart不显示商店数据
我在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));
}
确定这样:
我的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'
}
]
}
我最后的观点:
Theres没有改变饼图,在控制台中没有任何错误,但就像我说没有变化,这个饼图甚至不再可见 –
你可以尝试加载sencha小提琴吗? –
如果你不能手动执行Ajax请求设置r.result值的示例值 –
结果是否正确? –
来自我的PHP文件的结果是正确的,数据正在被正确检索,有两个数据字段来自查询它是类型,是男性还是女性,另一个字段是计数器,即男性的数量和女性。 –
类型是一个字符串,计数器存储为一个int值 –