Ext JS 5 кластеризованная диаграмма

Кто-нибудь пытался внедрить кластерную диаграмму в Ext JS 5?

Я вижу пример в Ext JS Legasy Kitchen Sink.

Но нет примера в обычной кухонной мойке.

Я попытался скопировать пример из устаревшей кухонной раковины, но не могу заставить его работать на моем локальном сервере. Все, что я могу получить, отображается на прикрепленном скриншоте:

введите описание изображения здесь

Может проблема в версии Ext JS? Я использую 5.0.0.970, и кажется, что это последняя версия на данный момент.

Источник

3 ответа

Решение

Я нашел решение. Похоже, что в текущей версии "sencha-charts" не имеет функциональности кластерного графика. Если вам это нужно, вы можете использовать "ext-charts". Добавьте его в раздел "Требуется" вашего app.json. Тогда будет работать пример с http://dev.sencha.com/ext/5.0.0/examples/charts-kitchensink/.

Источник

Я добился этого с помощью 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

Источник

Пожалуйста, измените xtype: 'chart' на xtype: 'cartesian'

Они удалили компонент диаграммы и добавили декартову, полярную и космическую составляющие.

Ссылка: http://docs-origin.sencha.com/extjs/5.0.0/apidocs/

Источник
Другие вопросы по тегам