Question

extjs图表上的新内容。

我有一张extjs区域图表，我得到了商店，模型，确定，但图表根本没有显示，没有，我不知道问题出在哪里：

var store1 = Ext.create('Ext.data.Store', {
    fields: ['date', 'ged', 'watt', 'sicomor'],
    data: [{
            "date": 20-10-2014,
            "ged": 52,
            "watt": 21,
            "sicomor": 18
        }, {
            "date": 21 - 10 - 2014,
            "ged": 24,
            "watt": 62,
            "sicomor": 14
        }, {
            "date": 22-10-2014,
            "ged": 41,
            "watt": 69,
            "sicomor": 25
        }]
});


Ext.define("dashboard.view.HrsWorkedChart", {
    extend: "Ext.chart.Chart",
    alias: "widget.hrsworkedchart",

        style: 'background:#fff',
        animate: true,
        store: store1,

        legend: {
            position: 'right'
        },

        axes: [{
            type: 'Numeric',
            minimum: 0,
            position: 'left',
            fields: ['watt', 'ged', 'sicomor'],
            title: 'Nombre documents en retard',
            minorTickSteps: 1,
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 0.5
                }
            }
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['date'],
            title: 'Jours'
        }],

        series: [{
            type: 'area',
            axis: 'left',
            xField: 'name',
            yField: ['watt', 'ged', 'sicomor'],
        }]

});

Ext.application({
    name: 'AreaChart',
    launch: function () {
        Ext.Viewport.add({xtype: 'hrsworkedchart'})
    }
});

jsfiddle

你能帮我解决吗？

欢呼雀跃

Answer 1

您必须在launch的{{1}}方法中编写所有代码，以确保ExtJS已加载并准备好使用。您还应该创建自己的视口，为此您可以使用Ext.application方法，或者只需在启动方法的末尾添加autoCreateViewport。

这应该有效：

Ext.create

Answer 2

您最好在单独的文件中定义视图和数据（也许是模型）。

适用于您的情况：

//create a file under dashborad.store.HrsWorkedChart.js
Ext.define("dashboard.store.HrsWorkedChart", { //config options });

//create a file under dashboard.view.HrsWorkedChart.js
Ext.define("dashboard.view.HrsWorkedChart", { 
......
store: dashboard.store.HrsWorkedChart,
......
});

然后你按照Guiherme的说法加载你的视口。

extjs图表没有显示出来

2 个答案: