EXTJS barchart条形图

最新推荐文章于 2019-11-15 15:43:01 发布

原创最新推荐文章于 2019-11-15 15:43:01 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #senchaArchitect #chart

ExtJs 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了使用Sencha框架配置柱状图的过程，包括数据存储、图表属性设置、标签及提示信息定制等内容，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Json文件：

data1.json:

store

往panel内拖入一个Pie Chart

创建store，url指定为data1.json，添加name和data1字段，sencha architect自动生成的代码：

Ext.define('MyApp10.store.PieChart', {
    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: 'PieChart',
            proxy: {
                type: 'ajax',
                url: 'data/chart/data1.json',
                reader: {
                    type: 'json'
                }
            },
            fields: [
                {
                    name: 'name'
                },
                {
                    name: 'data1'
                }
            ]
        }, cfg)]);
    }
});

属性设置

bar chart属性设置:

axes属性：

Category fields：name title：名称

Numeric fields：data1 title：数据

series属性设置：

xField:name

yField:data1

highlight:true

编辑label：

{'display':'insideEnd','field':'data1','color':'#333','text-anchor':'middle'}

编辑tips属性：

{
    trackMouse: true,
    width:'60px',
    renderer: function(storeItem, item) {
        this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + '$');
    }
}

保存按钮：（点击将chart存为本地图片）

onButtonClick1: function(button, e, eOpts) {
        Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                            if(choice == 'yes'){
                                Ext.getCmp('barchart').save({
                                    type: 'image/png'
                                });
                            }
                        });
    }

代码：

 {
                    xtype: 'panel',
                    id: 'barchart_tab',
                    title: 'BarChart',
                    items: [
                        {
                            xtype: 'chart',
                            height: 419,
                            id: 'barchart',
                            width: 591,
                            animate: true,
                            insetPadding: 20,
                            store: 'PieChart',
                            axes: [
                                {
                                    type: 'Category',
                                    fields: [
                                        'name'
                                    ],
                                    position: 'left',
                                    title: '名称'
                                },
                                {
                                    type: 'Numeric',
                                    fields: [
                                        'data1'
                                    ],
                                    position: 'bottom',
                                    title: '数据'
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    highlight: true,
                                    label: {
                                        display: 'insideEnd',
                                        field: 'data1',
                                        color: '#333',
                                        'text-anchor': 'middle'
                                    },
                                    tips: {
                                        trackMouse: true,
                                        width: '60px',
                                        renderer: function(storeItem, item) {
                                            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + '$');
                                        }
                                    },
                                    axis: 'bottom',
                                    xField: 'name',
                                    yField: 'data1'
                                }
                            ]
                        }
                    ],
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            dock: 'top',
                            items: [
                                {
                                    xtype: 'button',
                                    text: 'save chart',
                                    listeners: {
                                        click: {
                                            fn: me.onButtonClick1,
                                            scope: me
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                },