EXTJS4自学手册——线形图

一、创建数据容器：

var lineReportStore = Ext.create('Ext.data.JsonStore', {
    fields: ['地区', '人口'],
    data: [
        { '地区': '重庆', '人口': 1000 },
        { '地区': '上海', '人口': 2000 },
        { '地区': '成都', '人口': 1200 },
        { '地区': '云南', '人口': 800 }
    ]
});

二、创建线形图：

注意其和柱状图不一样的地方：series属性

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

        }]
    }
})

效果：