0

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

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

但一般厨房水槽中没有例子。

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

在此处输入图像描述

可能问题出在 Ext JS 版本中？我使用的是 5.0.0.970，目前看来是最新版本。

4

3 回答 3

2

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

于 2014-09-25T06:23:16.807 回答
0

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

他们删除了图表组件并添加了笛卡尔、极坐标和空间填充组件。

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

于 2014-07-01T10:56:43.627 回答
0

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

于 2014-07-02T20:23:32.540 回答