Javascript Piechart不显示存储数据
我在sencha touch中有一个饼图，它不是从我的存储中检索数据，而是来自mysql数据库的性别数据，数据是使用ajax请求检索的。这里是请求和存储Javascript Piechart不显示存储数据,javascript,extjs,sencha-touch,Javascript,Extjs,Sencha Touch,我在sencha touch中有一个饼图，它不是从我的存储中检索数据，而是来自mysql数据库的性别数据，数据是使用ajax请求检索的。这里是请求和存储 Ext.define('Qvidi.controller.MyController', { extend: 'Ext.app.Controller', config: { }, getGender: function() { Ext.Ajax.request({ method: 'POST',
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.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不推荐使用，因为它会对最终用户的体验产生有害影响。如需更多帮助，请查看 sencha touch.js:13032键“最小用户界面”未被识别和忽略。 app.js:39已加载 Console.js？_dc=1456999436953:35[DEPRECATE][Anonymous]loadData已被弃用，请使用add或setData
最后一个日志是在我将setData更改为loadData之后 这里是在我的方法中检索到的被解码为json的sql
{
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'
}
]
}
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
$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);
}
?>
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
$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);
}
?>
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'
}
]
}
结果正确吗？来自我的php文件的结果正确，数据被正确检索，查询中有两个数据字段，即类型，为男性或女性，另一个字段为计数器，这是男性和女性的数量。type是一个字符串，计数器存储为int值。你可以发布结果控制台的示例。log吗？饼图没有任何更改，控制台中没有任何错误，但就像我说的，没有更改，piechart甚至不再可见。您可以尝试加载sencha小提琴吗？如果您无法手动执行Ajax请求，请在r.result值上设置一个示例值，并在您的问题上添加图表的代码，可能图表没有设置好。您为什么不在商店中使用ajaxproxy？