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チャート内に on tabPanel が含まれていることを確認してください。そうしないと、チャートが正しくレンダリングされません。

一般的な注意事項

  • 変数に適切な名前を付けるようにしてください (mainGridPanel が実際には TabPanel であるなど)。
  • あなたのコードを適切に意図すると、経験によって、それは本当に厄介な速さになります。

また、全画面表示を使用して extjs コンポーネントを作成する場合は、ビューポートを使用することをお勧めします。これにより、すべてが適切にサイズ変更され、作業がより簡単になります。

于 2009-12-09T04:01:10.657 に答える