0

我创建了一个包含一些模拟数据的折线图，直接从 EXTJs 样本中提取。当我将它插入我的应用程序时，它在窗口中显示良好，但是，数据和所有图形都没有显示。更有趣的是，当我单击另存为图像按钮（由示例提供）时，我得到正确显示的数据、线条和图形，就像在示例中一样。我还可以看到/记录正在生成数据。我难住了。

获取数据：

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 的文档中：

如果 Component 要成为 Container 的子项，请不要使用此选项。Container 的布局管理器负责渲染和管理其子项。

如果您查看图表示例，您将看到仅呈现最外层的容器（或窗口）。

同样，如果您在容器上指定“适合”布局，则在子组件上指定大小几乎是多余的。

于 2012-12-10T00:28:09.840 回答