0

EXTJのサンプルから直接取得した、いくつかのモックデータを使用して折れ線グラフを作成しました。アプリケーションに接続すると、ウィンドウに正常に表示されますが、データとすべてのグラフィックが表示されません。さらに興味深いことに、[画像として保存]ボタン（サンプルで提供）をクリックすると、サンプルと同じように、正しく表示されたデータ、線、およびグラフィックが表示されます。また、データが生成されていることを確認/ログに記録できます。私は困惑しています。

データを取得します。

window.generateData = function(n, floor){
        var data = [],
            p = (Math.random() *  11) + 1,
            i;

        floor = (!floor && floor !== 0)? 20 : floor;

        for (i = 0; i < (n || 12); i++) {
            data.push({
                name: Ext.Date.monthNames[i % 12],
                data1: Math.floor(((Math.random() - 0.5) * 100), floor),
                data2: Math.floor(((Math.random() - 0.5) * 100), floor),
                data3: Math.floor(((Math.random() - 0.5) * 100), floor),
                data4: Math.floor(((Math.random() - 0.5) * 100), floor),
                data5: Math.floor(((Math.random() - 0.5) * 100), floor),
                data6: Math.floor(((Math.random() - 0.5) * 100), floor),
                data7: Math.floor(((Math.random() - 0.5) * 100), floor),
                data8: Math.floor(((Math.random() - 0.5) * 100), floor),
                data9: Math.floor(((Math.random() - 0.5) * 100), floor)
            });
        }
        return data;
    };

チャートを作成します。

store1.loadData(generateData(8));

        var chart = Ext.create('Ext.chart.Chart', {
            xtype: 'chart',
            renderTo: Ext.getBody(),
            animate: true,
            width: 760,
            height: 480,
            store: store1,
            shadow: true,
            theme: 'Category1',
            legend: {
                position: 'right'
            },
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['data1', 'data2', 'data3'],
                title: 'Number of Parkers',
                minorTickSteps: 1,
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 0.5
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Month of the Year'
            }],
            series: [{
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'name',
                yField: 'data1',
                markerConfig: {
                    type: 'cross',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }, {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                smooth: true,
                xField: 'name',
                yField: 'data2',
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }, {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                smooth: true,
                fill: true,
                xField: 'name',
                yField: 'data3',
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }]
        });

私のウィンドウコンポーネントよりも、私は単に追加します：

...
items: [{
                xtype: 'container',
            id: 'dashboard-content',
                margin: 50,
                layout: 'fit',
                renderTo: Ext.getBody(),
            items: chart

            }]
...

画像として保存時：

...
chart.save({
    type: 'image/png'
});
...

すべてが作成され、データが生成され、グラフが表示され、描画されますが、線やグラフィックはありません。また、画像として保存すると、すべてが正しく表示される画像がダウンロードされます。前もって感謝します！

4

2 に答える 2

1

ページに CSS の競合が読み込まれ、グラフにグラフィックが表示されないことが判明しました。ext の上にロードされている他の CSS を削除するとすぐに、チャートがレンダリングされました。

于 2012-12-10T01:01:13.530 に答える
0

renderTo に関するドキュメントから:

コンポーネントがコンテナの子アイテムになる場合は、このオプションを使用しないでください。子項目をレンダリングおよび管理するのは、コンテナーのレイアウト マネージャーの役​​割です。

グラフの例を見ると、最も外側のコンテナー (またはウィンドウ) のみがレンダリングされていることがわかります。

同様に、コンテナに「フィット」レイアウトを指定している場合、子コンポーネントにサイズを指定することはほとんど冗長です。

于 2012-12-10T00:28:09.840 に答える