Question

有人试图在Ext JS 5中实现聚簇图表吗？

我在Ext JS Legasy Kitchen Sink中看到了这个例子。

但usual kitchen sink中没有例子。

我尝试从传统厨房水槽复制示例，但无法使其在我的本地服务器上运行。所有我能得到的都显示在附加的屏幕截图上：

enter image description here

可能是Ext JS版本的问题？我使用5.0.0.970，现在看来它是最新版本。

Answer 1

我使用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

Answer 2

请将xtype：'chart'更改为xtype：'cartesian'

他们删除了图表组件并添加了笛卡儿，极地和空间填充组件。

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

Answer 3

我找到了解决方案。似乎在当前版本＆＃34; sencha-charts＆＃34;没有聚簇图表功能。如果您需要它，您可以使用＆＃34; ext-charts＆＃34;。将其添加到＆＃34;要求＆＃34; app.json的一部分。然后来自http://dev.sencha.com/ext/5.0.0/examples/charts-kitchensink/#clustered-bar的示例将起作用。

Ext JS 5聚集图表

3 个答案: