Ext JS 5集羣圖表

Question

有人試圖在Ext JS 5中實現集羣圖表嗎？

我看到在Ext JS Legasy Kitchen Sink中的例子。

但在usual kitchen sink中沒有例子。

我試圖複製傳統廚房水槽的例子，但不能讓它在我的本地服務器上工作。所有我可以顯示在附截圖：

可能問題是出在Ext JS的版本？我使用5.0.0.970，它似乎是現在的最新版本。

Answer 1

我已經找到了解決辦法。 看來，在當前版本的「sencha-charts」沒有集羣圖表功能。如果你需要它，你可以使用「ext-charts」。將它添加到app.json的「requires」部分。然後從http://dev.sencha.com/ext/5.0.0/examples/charts-kitchensink/#clustered-bar的例子將工作。

Answer 2

請更改的xtype：「表」到的xtype：「笛卡爾」

他們除去圖表組件，並添加笛卡爾，極性和空間填充部件。

編號：http://docs-origin.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.chart.CartesianChart

Answer 3

我通過使用stacked: false實現了此目的。

代碼示例。

圖：

Ext.define('App.Domain.Chart', { 
    extend: 'Ext.chart.CartesianChart', 
    title: 'Chart', 
    alias: 'widget.appDomainChart', 
    legend: { 
     docked: 'bottom' 
    }, 
    interactions: ['itemhighlight'], 
    colors: ['blue', 'red'], 
    axes: [{ 
     type: 'numeric', 
     position: 'left', 
     adjustByMajorUnit: true, 
     grid: true, 
     fields: ['ActualParameter'], 
     minimum: 0 
    }, { 
     type: 'category', 
     position: 'bottom', 
     grid: true, 
     fields: ['ControlValue'], 
    }], 
    series: [{ 
     type: 'bar', 
     axis: 'left', 
     title: ['Fact', 'Planned'], 
     xField: 'ControlValue', 
     yField: ['ActualParameter', 'PlannedParameter'], 
     display: 'outside', 
     stacked: false, 
     style: { 
      opacity: 0.80 
     }, 
     highlight: { 
      fillStyle: 'green' 
     }, 
     tooltip: { 
      style: 'background: #fff', 
      renderer: function (storeItem, item) { 
       var browser = item.series.getTitle()[Ext.Array.indexOf(item.series.getYField(), item.field)]; 
       this.setHtml(browser + ': ' + storeItem.get(item.field) + '.'); 
      } 
     } 
    }] 
}); 

數據：

{ 
    "data": { 
    "items": [ 
     { 
     "Id": 54, 
     "ObjectName": null, 
     "StageName": null, 
     "Result": "Result 1", 
     "ControlValue": "Control value 1", 
     "PlannedParameter": 10.0, 
     "ActualParameter": 10.0, 
     "Unit": "days", 
     "Indicator": 1 
     }, 
     { 
     "Id": 55, 
     "ObjectName": null, 
     "StageName": null, 
     "Result": "", 
     "ControlValue": "Control value 2", 
     "PlannedParameter": 3.0, 
     "ActualParameter": 3.0, 
     "Unit": "departments", 
     "Indicator": 1 
     }, 
     { 
     "Id": 56, 
     "ObjectName": null, 
     "StageName": null, 
     "Result": "", 
     "ControlValue": "Control value 3", 
     "PlannedParameter": 100.0, 
     "ActualParameter": 100.0, 
     "Unit": "%", 
     "Indicator": 4 
     } 
    ], 
    "totalCount": 3 
    }, 
    "errors": [], 
    "success": true, 
    "totalCount": 3, 
    "globalErrors": [] 
} 

結果作爲圖像：http://screencast.com/t/ilb0mYZIUJ4