ExtJS3 中的图表

Posted

技术标签:

【中文标题】ExtJS3 中的图表【英文标题】:Charts in ExtJS3 【发布时间】: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"
]

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

希望这会有所帮助。

【讨论】:

以上是关于ExtJS3 中的图表的主要内容,如果未能解决你的问题,请参考以下文章

extjs3.0 关于 linechart的问题 求教:

ExtJs3 中的 Extjs4 this.callParent

将自定义项添加到 ExtJS3 中的网格菜单

更改网格 extjs3 中的记录边框颜色

在 EXTJS3 的 ComboBox 中的选项之间添加分隔线

加载商店后如何在网格中设置值? EXTJS3