EXTJS4自学手册——分组雷达图

一、数据容器：

var groupRadarCharStore = Ext.create('Ext.data.JsonStore', {
    fields: ['铁', '铜', '铝', '年'],
    data: [
        { '铁': 10000, '铜': 8000, '铝': 7000, '年': '2008' },
        { '铁': 11000, '铜': 10000, '铝': 8000, '年': '2009' },
        { '铁': 8000, '铜': 11000, '铝': 10000, '年': '2010' },
        { '铁': 15000, '铜': 11500, '铝': 11000, '年': '2011' }
    ]
});

二、创建雷达图：

Ext.define("ExtStudy.GroupRadarChar", {
    extend: 'Ext.window.Window',
    width: 500,
    height: 300,
    layout: 'fit',
    maximizable: true,
    items: {
        xtype: 'chart',
        style: 'background:#fff',
        animate: true,
        store: groupRadarCharStore,
        axes: [{//显示雷达图坐标
            type: 'Radial',
            position: 'radial',
            label: {
                display: true
            }
        }],
        legend: {
            position: 'right'
        },
        series: [{
            type: 'radar',//采用线形图
            xField: '年',
            yField: '铁',
            showInLegend: true,
            showMarkers: true,
            highlight: true,
            markerConfig: {
                radius: 4
            },
            style: {
                'stroke-width': 2,
                fill: 'none'
            }
        }, {
            type: 'radar',//采用线形图
            xField: '年',
            yField: '铜',
            showInLegend: true,
            showMarkers: true,
            highlight: true,
            markerConfig: {
                radius: 4
            },
            style: {
                'stroke-width': 2,
                fill: 'none'
            }
        }, {
            type: 'radar',//采用线形图
            xField: '年',
            yField: '铝',
            showInLegend: true,
            showMarkers: true,
            highlight: true,
            markerConfig: {
                radius: 4
            },
            style: {
                'stroke-width': 2,
                fill: 'none'
            }
        }]
    }
})

效果图：