ExtJS3 中的图表答案

【问题标题】：Charts in ExtJS3ExtJS3 中的图表
【发布时间】：2013-01-07 09:50:32
【问题描述】：

我正在使用 ExtJS3，我想将此图表放入具有动态存储的面板中 http://dev.sencha.com/deploy/ext-3.4.0/examples/chart/pie-chart.html

我尝试将此图表包含到我的面板代码中，但没有成功。有没有人有 ExtJS3 面板中包含的图表的解决方案或示例

谢谢

【问题讨论】：

【解决方案1】：

我使用您的示例使用动态存储生成图表：

Ext.chart.Chart.CHART_URL = 'http://dev.sencha.com/deploy/ext-3.4.0/resources/charts.swf';

Ext.onReady(function(){
    var store = new Ext.data.JsonStore({
    url: "sample_data.php",
    root: 'results',
    fields: [
         {name: 'season'},
         {name: 'total'}
    ]
});

    new Ext.Panel({
        width: 400,
        height: 400,
        title: 'Pie Chart with Legend - Favorite Season',
        renderTo: 'container',
        items: {
            store: store,
            xtype: 'piechart',
            dataField: 'total',
            categoryField: 'season',
            //extra styles get applied to the chart defaults
            extraStyle:
            {
                legend:
                {
                    display: 'bottom',
                    padding: 5,
                    font:
                    {
                        family: 'Tahoma',
                        size: 13
                    }
                }
            }
        }
    });
});

其中http://dev.sencha.com/deploy/ext-3.4.0/resources/charts.swf 是您可以找到图表的目标，sample_data.php 返回以下 json：

{"results":[
    {"total":"150","season":"Summer"},
    {"total":"245","season":"Fall"},
    {"total":"117","season":"Winter"},
    {"total":"184","season":"spring"}
]}

注意：这通常应该设置为本地资源。

希望这会有所帮助。

【讨论】：