Как добавить более 3 СЕРИЙ в диаграмму LINE или SCATTER? - PullRequest
Новая
       20

Как добавить более 3 СЕРИЙ в диаграмму LINE или SCATTER?

3 голосов
/ 20 июля 2011

Когда я пытаюсь добавить более 3 СЕРИЙ в диаграмму LINE или SCATTER, возникает исключение:

В Google Chrome:

Uncaught TypeError: Свойство 'undefined' объекта [object Object] не является функцией

В Firefox:

Ext.chart.Shape [type] не является функцией [Stop this error]}, attr));

Это было идентифицировано Поддержкой ExtJS как ошибка: http://www.sencha.com/forum/showthread.php?140932-How-to-add-more-than-3-SERIES-in-a-LINE-or-SCATTER-chart

Ниже следуйте коду: 

Ext.require('Ext.chart.*');

Ext.define('AM.view.user.ScatterGraphic', {
extend : 'Ext.chart.Chart',
alias : 'widget.scatterGraphic',
title : 'All Users',
animate : true,
renderTo : Ext.getBody(),
theme : 'Category2',

axes : [ {
    type : 'Numeric',
    position : 'bottom',
    fields : [ 'data1', 'data2', 'data3', 'data4', 'data5' ],
    title : 'Sample Values',
    grid : true,
    minimum : 0
}, {
    type : 'Category',
    position : 'left',
    fields : [ 'name' ],
    title : 'Sample Metrics'
} ],

series : [{
    type : 'scatter',
    axis: true,
    markerConfig : {
        radius : 5,
        size : 5
    },
    axis : 'left',
    xField : 'name',
    yField : 'data1'
}, {
    type : 'scatter',
    axis: true,
    markerConfig : {
        radius : 5,
        size : 5
    },
    axis : 'left',
    xField : 'name',
    yField : 'data2'
}, {
    type : 'scatter',
    axis: true,
    markerConfig : {
        radius : 5,
        size : 5
    },
    axis : 'left',
    xField : 'name',
    yField : 'data3'
},
// THIS SERIE THROWS THE EXCEPTION
 {
    type : 'scatter',
    axis: true,
    markerConfig : {
        radius : 5,
        size : 5
    },
    axis : 'left',
    xField : 'name',
    yField : 'data4'
}], 

initComponent : function() {
    this.store = {
        fields : [ 'name', 'data1', 'data2', 'data3', 'data4', 'data5' ],
        data : [ {
            'name' : 'metric one',
            'data1' : 10,
            'data2' : 12,
            'data3' : 14,
            'data4' : 8,
            'data5' : 13
        }, {
            'name' : 'metric two',
            'data1' : 7,
            'data2' : 8,
            'data3' : 16,
            'data4' : 10,
            'data5' : 3
        }, {
            'name' : 'metric three',
            'data1' : 5,
            'data2' : 2,
            'data3' : 14,
            'data4' : 12,
            'data5' : 7
        }, {
            'name' : 'metric four',
            'data1' : 2,
            'data2' : 14,
            'data3' : 6,
            'data4' : 1,
            'data5' : 23
        }, {
            'name' : 'metric five',
            'data1' : 27,
            'data2' : 38,
            'data3' : 36,
            'data4' : 13,
            'data5' : 33
        } ]
    };

    this.callParent(arguments);
}
});

Кстати, у кого-нибудь есть идеи, что можно сделать, чтобы создать что-то подобное?

Спасибо!

Ответы [ 3 ]

2 голосов
/ 09 февраля 2012

Просто убедитесь, что вы выбрали тип маркера, который вы собираетесь использовать в каждой серии.Типы определены в классе Ext.chart.Shape , и они следующие:

  • круг
  • линия
  • квадрат
  • треугольник
  • ромб
  • крест
  • плюс
  • стрелка
  • капля (этот не работал для меня)

Способ указания типа маркера для серии: 

series: [
   {
      ...
      markerConfig: { type: 'diamond' }
      ...          
   }    
]
0 голосов
/ 09 февраля 2014

попробуйте это шаг за шагом: 

chart.surface.removeAll();
chart.series.removeAll();
chart.series.addAll(NewSeries);
chart.redraw();
chart.refresh();
0 голосов
/ 05 августа 2011

Эта проблема возникает, когда я оставляю ExtJS автоматический выбор маркеров. Если я устанавливаю маркер для каждой серии на графике, проблема не возникает. Это оно! :)

...