Question

我有一个我从Sencha抓取的ExtJS代码，我正试图在jsfiddle上运行它，并进行一些编辑以了解它是如何变化的。

但图表根本没有显示。

知道如何渲染图表吗？

Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    layout: 'fit',
    items: {
        xtype: 'cartesian',
        store: {
            fields: ['time', 'open', 'high', 'low', 'close'],
            data: [{
                    'time': new Date('Jan 1 2010').getTime(),
                    'open': 600,
                    'high': 614,
                    'low': 578,
                    'close': 590
                },
                {
                    'time': new Date('Jan 2 2010').getTime(),
                    'open': 590,
                    'high': 609,
                    'low': 580,
                    'close': 580
                },
                {
                    'time': new Date('Jan 3 2010').getTime(),
                    'open': 580,
                    'high': 602,
                    'low': 578,
                    'close': 602
                },
                {
                    'time': new Date('Jan 4 2010').getTime(),
                    'open': 602,
                    'high': 614,
                    'low': 586,
                    'close': 586
                },
                {
                    'time': new Date('Jan 5 2010').getTime(),
                    'open': 586,
                    'high': 602,
                    'low': 565,
                    'close': 565
                }
            ]
        },
        axes: [{
            type: 'numeric',
            position: 'left',
            fields: ['open', 'high', 'low', 'close'],
            title: {
                text: 'Sample Values',
                fontSize: 15
            },
            grid: true,
            minimum: 560,
            maximum: 640
        }, {
            type: 'time',
            position: 'bottom',
            fields: ['time'],
            fromDate: new Date('Dec 31 2009'),
            toDate: new Date('Jan 6 2010'),
            title: {
                text: 'Sample Values',
                fontSize: 15
            },
            style: {
                axisLine: false
            }
        }],
        series: {
            type: 'candlestick',
            xField: 'time',
            openField: 'open',
            highField: 'high',
            lowField: 'low',
            closeField: 'close',
            style: {
                dropStyle: {
                    fill: 'rgb(237, 123, 43)',
                    stroke: 'rgb(237, 123, 43)'
                },
                raiseStyle: {
                    fill: 'rgb(55, 153, 19)',
                    stroke: 'rgb(55, 153, 19)'
                }
            }
        }
    }
});

我还尝试添加一个div并将其呈现给它但它不起作用

<div id = "frm"></div>

/*...*/

renderTo : 'frm'

我不完全确定原因是否是因为 ExtJS 版本，但基于Sencha文档，在 5.0版本中引入了烛台图表Ext.chart.series.CandleStick。 0 的ExtJS。

如果我错了，请纠正我。

Answer 1

在使用ExtJS 5.0.0中的任何图表之前，您需要sencha-charts文件中的app.json，而不包括您无法解析error。没有像ExtJS 5.0.1 sencha-charts-debug这样的直接chart gpl库。

有关详细信息，请参阅此sencha forum。

以下是ExtJS 5.0.1 FIDDLE 您可以在此处查看图表是否运行良好，因为此处提供了外部gpl图表库。

我希望在这个答案的帮助下，您将在工作代码中解决您的问题。

ExtJS无法渲染

1 个答案: