extjs圖表不顯示

Question

extjs圖表上的新增功能。

我有一個ExtJS面積圖，我得到了店，型號，OK，但圖表沒有顯示出來，在所有的，什麼都沒有，我不知道問題出在哪裏：

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

您必須編寫所有代碼的Ext.application的launch方法中，以確保ExtJS的被加載並準備使用。你也應該創建你的視口，爲此你可以使用autoCreateViewport方法或者簡單地在你的啓動方法結尾添加一個Ext.create。

這應該工作：

Ext.application({ 
    name: 'AreaChart', 
    launch: function() { 
     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.create('Ext.container.Viewport', { 
      layout: 'fit', 
      items: [{ 
       xtype: 'hrsworkedchart' 
      }] 
     }); 
    } 
}); 

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說加載您的視口。