EXTJS4自学手册——分组线形图

一、创建数据容器：

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

二、创建分组线形图：

注意，其和线形图的区别在于series的属性重复了几遍，及每条线都重新定义

Ext.define("ExtStudy.MultiLineRerport", {
    extend: 'Ext.window.Window',
    width: 500,
    height: 300,
    layout: 'fit',
    maximizable: true,
    items: {
        xtype: 'chart',
        style: 'background:#fff',
        animate: true,
        store: multiLineReportStore,
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['铁', '铜', '铝'],
            title: '数量',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['年'],
            calculateCategoryCount: false,
            title: '年份'
        }],
        legend: {
            position: 'right'
        },
        series: [{//铁
            type: 'line',//采用线形图
            highlight: {//设置鼠标指向报告曲线时，曲线会高亮显示
                size: 7,
                radius: 7
            },
            tips: {//鼠标指向节点时的提示信息
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle( '铁: '+ storeItem.
                    get('铁') + '万吨');
                }
            },
           // axis: 'left',
            xField: '年',//x轴数据
            yField: '铁',//y轴数据
            smooth: true,//报告显示成曲线而不是一条一条的直线
            markerConfig: {//节点样式
                type: 'cross',
                radius: 5,
                'fill': 'blue'
            },
            showMarkers: true,//是否显示节点
            fill: false//报告曲线下面的填充

        }, {//铜
            type: 'line',//采用线形图
            highlight: {//设置鼠标指向报告曲线时，曲线会高亮显示
                size: 7,
                radius: 7
            },
            tips: {//鼠标指向节点时的提示信息
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle('铜: ' + storeItem.
                    get('铜') + '万吨');
                }
            },
            // axis: 'left',
            xField: '年',//x轴数据
            yField: '铜',//y轴数据
            smooth: true,//报告显示成曲线而不是一条一条的直线
            markerConfig: {//节点样式
                type: 'cross',
                radius: 5,
                'fill': '#000000'
            },
            showMarkers: true,//是否显示节点
            fill: false//报告曲线下面的填充

        }, {//铝
            type: 'line',//采用线形图
            highlight: {//设置鼠标指向报告曲线时，曲线会高亮显示
                size: 7,
                radius: 7
            },
            tips: {//鼠标指向节点时的提示信息
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle('铝: ' + storeItem.
                    get('铝') + '万吨');
                }
            },
            // axis: 'left',
            xField: '年',//x轴数据
            yField: '铝',//y轴数据
            smooth: true,//报告显示成曲线而不是一条一条的直线
            markerConfig: {//节点样式
                type: 'cross',
                radius: 5,
                'fill': '#f00'
            },
            showMarkers: true,//是否显示节点
            fill: false//报告曲线下面的填充

        }]
    }
})

效果：