extjs - 如何在折线图或散点图中添加超过 3 个系列？

Question

当我尝试在折线图或散点图中添加超过 3 个系列时，出现异常:

在谷歌浏览器中:

Uncaught TypeError: Property 'undefined' of object [object Object] is not a function

在 Firefox 中:

Ext.chart.Shape[type] is not a function [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);
}
});

顺便问一下，有人知道可以做些什么来创建类似的东西吗？

谢谢!

Answer 1

只需确保选择要在每个系列中使用的标记类型。 这些类型在类 Ext.chart.Shape 中定义它们是:

• 圆圈
• 行
• 正方形
• 三角形
• 钻石
• 交叉
• 加上
• 箭头
• 放弃(这个对我没用)

为系列指定标记类型的方法是

series: [
   {
      ...
      markerConfig: { type: 'diamond' }
      ...          
   }    
]