0

我试图使用 ExtJs 3.0 渲染一个简单的饼图，但不能。以下是片段：

<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），但饼图内容不存在/渲染。

快速指导受到高度赞赏，因为它需要大量时间而没有解决方案

4

2 回答 2

0

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

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

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

于 2009-12-09T02:40:03.677 回答
0

我的版本来了

<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 中，否则您可能会遇到一些奇怪的行为，例如元素无法正确呈现
  • 确保plain: true在 tabPanel 上包含图表，否则图表将无法正确呈现

一般说明

  • 尝试为您的变量起个好名字（例如 mainGridPanel 实际上是 TabPanel）
  • 正确地意图你的代码，根据经验，它真的很快变得混乱。

此外，如果您想使用全屏制作 extjs 组件，则最好使用视口，它可以使所有内容都很好地调整大小并使事情变得更容易

于 2009-12-09T04:01:10.657 回答