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密钥＆＃34; minimum-ui＆＃34;不被承认和忽视。 app.js：39 loading

Console.js？_dc = 1456999436953：35 [DEPRECATE] [匿名] loadData已弃用，请使用add或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'
                }
            ]
        }

我的最终观点：

饼图不显示商店数据

1 个答案: