Question

我创建了一个包含一些模拟数据的折线图，直接从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'
});
...

创建所有内容，生成数据，显示图表并绘制但没有任何线条或图形。再次，如果我保存为图像，它会下载一个正确显示所有内容的图像。提前谢谢！

Answer 1

原来我的页面上加载了一些CSS冲突导致没有图形在图表中呈现。一旦我删除了在ext上面加载的其他CSS，就会呈现图表。

Answer 2

关于renderTo：

的文档

如果要将Component作为a的子项，请不要使用此选项容器。这是Container的布局经理的责任渲染和管理其子项目。

如果查看图表示例，您将看到只渲染最外面的容器（或窗口）。

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

EXTJs图表不呈现数据或图形

2 个答案: