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

私は解決策を見つけました。現在のバージョンの「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 に答える
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 に答える