EXTJS lineChart折线图

最新推荐文章于 2017-12-28 15:23:35 发布

绿苹果果

最新推荐文章于 2017-12-28 15:23:35 发布

阅读量6.3k

点赞数 1

分类专栏： ExtJs 文章标签： EXTJS senchaArchitect chart

本文链接：https://blog.csdn.net/dongshaoshuai/article/details/38415073

版权

ExtJs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JSON文件

Line chart绑定store

拖入一个Line chart并绑定store（设置好url和fileds）

sencha architect自动生成的代码：

store：

Ext.define('MyApp10.store.data2', {
    extend: 'Ext.data.Store',

    requires: [
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json',
        'Ext.data.Field'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            autoSync: true,
            storeId: 'data2',
            proxy: {
                type: 'ajax',
                url: 'data/chart/data2.json',
                reader: {
                    type: 'json'
                }
            },
            fields: [
                {
                    name: 'name'
                },
                {
                    name: 'data1'
                },
                {
                    name: 'data2'
                },
                {
                    name: 'data3'
                }
            ]
        }, cfg)]);
    }
});

设置属性

line chart属性：

添加一个legend和三个series：

axes属性：

Category fields：name title：名称

Numeric fields：data1，data2，data3， title：数据编辑grid属性：

grid: {
                                        odd: {
                                            opacity: 1,
                                            fill: '#ddd',
                                            stroke: '#bbb',
                                            'stroke-width': 0.5
                                        }
                                    },

series属性：

直接贴代码了：

series: [
                                {
                                    type: 'line',
                                    highlight: {
                                        size: 7,
                                        radius: 7
                                    },
                                    xField: 'name',
                                    yField: 'data1',
                                    markerConfig: {
                                        type: 'cross',
                                        size: 4,
                                        radius: 4,
                                        'stroke-width': 0
                                    },
                                    smooth: 3
                                },
                                {
                                    type: 'line',
                                    highlight: {
                                        size: 7,
                                        radius: 7
                                    },
                                    xField: 'name',
                                    yField: 'data2',
                                    markerConfig: {
                                        type: 'circle',
                                        size: 4,
                                        radius: 4,
                                        'stroke-width': 0
                                    },
                                    smooth: 3
                                },
                                {
                                    type: 'line',
                                    highlight: {
                                        size: 7,
                                        radius: 7
                                    },
                                    xField: 'name',
                                    yField: 'data3',
                                    fill: true,
                                    markerConfig: {
                                        type: 'circle',
                                        size: 4,
                                        radius: 4,
                                        'stroke-width': 0
                                    },
                                    smooth: 3
                                }
                            ],

全部代码

{
                    xtype: 'panel',
                    id: 'linechart_tab',
                    title: 'LineChart',
                    items: [
                        {
                            xtype: 'chart',
                            height: 477,
                            id: 'linechart',
                            width: 789,
                            animate: true,
                            insetPadding: 20,
                            store: 'data2',
                            theme: 'Category1',
                            axes: [
                                {
                                    type: 'Category',
                                    fields: [
                                        'name'
                                    ],
                                    title: '名称',
                                    position: 'bottom'
                                },
                                {
                                    type: 'Numeric',
                                    fields: [
                                        'data1',
                                        'data2',
                                        'data3'
                                    ],
                                    grid: {
                                        odd: {
                                            opacity: 1,
                                            fill: '#ddd',
                                            stroke: '#bbb',
                                            'stroke-width': 0.5
                                        }
                                    },
                                    title: '数据',
                                    position: 'left'
                                }
                            ],
                            series: [
                                {
                                    type: 'line',
                                    highlight: {
                                        size: 7,
                                        radius: 7
                                    },
                                    xField: 'name',
                                    yField: 'data1',
                                    markerConfig: {
                                        type: 'cross',
                                        size: 4,
                                        radius: 4,
                                        'stroke-width': 0
                                    },
                                    smooth: 3
                                },
                                {
                                    type: 'line',
                                    highlight: {
                                        size: 7,
                                        radius: 7
                                    },
                                    xField: 'name',
                                    yField: 'data2',
                                    markerConfig: {
                                        type: 'circle',
                                        size: 4,
                                        radius: 4,
                                        'stroke-width': 0
                                    },
                                    smooth: 3
                                },
                                {
                                    type: 'line',
                                    highlight: {
                                        size: 7,
                                        radius: 7
                                    },
                                    xField: 'name',
                                    yField: 'data3',
                                    fill: true,
                                    markerConfig: {
                                        type: 'circle',
                                        size: 4,
                                        radius: 4,
                                        'stroke-width': 0
                                    },
                                    smooth: 3
                                }
                            ],
                            legend: {
                                position: 'right'
                            }
                        }
                    ]
                },