无法使用 ExtJs 3.0 呈现简单的饼图答案

【问题标题】：Could not able to render simple Piechart using ExtJs 3.0无法使用 ExtJs 3.0 呈现简单的饼图
【发布时间】：2009-12-09 02:33:29
【问题描述】：

我试图使用 ExtJs 3.0 渲染一个简单的饼图，但不能。下面是sn-p：

<div id="ext_grid_panel">

    <div id="blackout_tab">
        <div id="grid_blackout_current"></div>
    </div>

    <div id="gls_tab">
         <div id="gls_current"></div>
    </div>

</div>

var mainGridPanelWidth = (Ext.IsIE)?'':'width: \'100%\',';
var mainGridPanel = new Ext.TabPanel({
    id: 'maingridpanel',
    renderTo: 'ext_grid_panel',
    style: {width:'100%'},
    tabWidth: 1000,
    activeTab: 0,
    items: [
        {id: 'allTabPanel',contentEl: 'blackout_tab',title: 'All'},
        {id: 'glsTabPanel',contentEl: 'gls_tab',title: 'GLS'}

    ]
});

if (!Ext.IsIE)
    mainGridPanel.setWidth('100%');

Ext.getCmp('allTabPanel').on('activate', function() {

}); 

Ext.getCmp('glsTabPanel').on('activate', function() {   

}); 


var pieChart = {
        xtype : 'piechart',
        store : [{'total' :'42', 'range':'20,000'},{'total' :'53', 'range':'10,000'}],
        dataField : 'total',
        categoryField : 'range'         
        };

var panelBlackoutCurrent = new Ext.Panel({
    id: 'panelblackoutcurrent',
    renderTo: 'grid_blackout_current',
    items: [
            pieChart
    ]
});

var panelglsCurrent = new Ext.Panel({
    id: 'panelglscurrent',
    renderTo: 'gls_current',
    items: [
        pieChart
    ]
});

当我在 firefox firebug 中检查时，我看到创建了一个对象（.swf）但饼图内容不存在/渲染。

非常感谢快速指导，因为它需要大量时间而没有解决方案

【问题讨论】：

标签： extjs pie-chart

【解决方案1】：

您可以使用示例饼图作为起点：

http://www.extjs.com/deploy/dev/examples/chart/pie-chart.js

结果如下：http://www.extjs.com/deploy/dev/examples/chart/pie-chart.html

【讨论】：

感谢您的链接，Igor。不过，我无法将其渲染。当我在萤火虫中检查时，我发现以下但没有呈现饼图：。我的应用程序部署在 IIS 服务器中，我想知道服务器是否不允许/支持呈现“.swf”文件。如果为真，是否知道如何在 IIS 中启用/设置以允许“应用程序/x-shockwave-flash”类型的文件？ 'PhP.ini' 中的任何其他设置需要完成吗？
感谢伊戈尔，它有效！您提供了一个简单、基本的启动步骤，这确实很有帮助。

【解决方案2】：

我的版本来了

<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>



    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>

<div id="ext_grid_panel">

</div>
<script>
Ext.onReady(function(){
    var store = new Ext.data.JsonStore({
        fields: ['total', 'range'],
        autoLoad: true,
        data: [
            {
                total: 42,
                range:'20,000'
            }
            ,{
                total: 53,
                range:'10,000'
            }
        ]
    });


    var mainGridPanel = new Ext.TabPanel({
        renderTo: 'ext_grid_panel',
        //style: {width:'100%'},
        width: '100%',
        height: 400,
        activeTab: 0,

        plain: true,
        items: [
            {
                id: 'panelglscurrent',
                title: 'GPS',
                layout: 'fit',
                listeners: {
                    activate: function(){
                    }
                },
                items: [{
                    id: 'chart1',
                    xtype : 'piechart',
                    store : store,
                    dataField : 'total',
                    categoryField : 'range'                 
                }]
            },
            {
                id: 'panelblackoutcurrent',
                title: 'All',
                layout: 'fit',
                listeners: {
                    activate: function(){

                    }
                },
                items: [
                   {
                    id: 'chart2',
                    xtype : 'piechart',
                    store : store,
                    dataField : 'total',
                    categoryField : 'range'                 
                   }
                ]
            }
        ]
    });

    Ext.getCmp('panelglscurrent').on('activate', function() {
        Ext.getCmp('panelglscurrent').doLayout(true);
    }); 

    Ext.getCmp('panelblackoutcurrent').on('activate', function() {   
        Ext.getCmp('panelblackoutcurrent').doLayout(true);
    }); 

    if (!Ext.IsIE)
        mainGridPanel.setWidth('100%');
});





</script>
</body>

</html>

您的样本存在一些问题：

首先您必须创建一个适当的存储，将对象数组传递给饼图是不够的
您还应该将代码包装在 Ext.onReady 中，否则您可能会遇到一些奇怪的行为，例如元素无法正确呈现
确保在 tabPanel 上包含 plain: true 并在其中包含图表，否则图表将无法正确呈现

一般说明

试着给你的变量起个好名字（比如 mainGridPanel 实际上是一个 TabPanel）
正确使用您的代码，根据经验，它真的很快就会变得混乱。

另外，如果你想让 extjs 组件使用全屏，你最好使用视口，它可以很好地调整所有内容，让你更轻松

【讨论】：

非常感谢RageZ，它有效！！！！您的解释非常详细，易于理解。
RageZ，我看到了一种奇怪的行为。两个选项卡每次都在 Firefox 中呈现良好，但在 IE 6 中，当我单击第二个选项卡（即 id：'panelblackoutcurrent'，标题：'All'）时，它会随机呈现饼图（有时会呈现，有时不会呈现）。所以我再次刷新以查看结果，它有时会渲染而其他时候不渲染。您能指导我解决办法吗？提前致谢。