extjs4.2 mvc模式开发柱状图(view)

最新推荐文章于 2023-07-26 07:38:44 发布

原创最新推荐文章于 2023-07-26 07:38:44 发布 · 954 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs4.2 mvc 柱状图

extjs4.2 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用ExtJS创建图表的应用实例，包括柱状图和折线图的展示。通过具体的代码示例展示了如何配置图表的各项属性，如轴、系列等，并提供了相应的图表截图。

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

Ext.define('Packt.view.count.Casesmain',{
    
    extend: 'Ext.container.Container',

    alias:'widget.casesmaingrid',

    requires:[
        'Ext.tab.Panel',
        'Ext.chart.Chart',
        'Ext.layout.container.Border'
    ],

    xtype: 'border',

    layout: {
        type: 'border'
    },

    items: [{
        region: 'east',
        xtype: 'panel',
        title: 'XXXX',
        collapsible: true,
        split: true,
        width: 420,
        layout: 'fit',
        items:[{
            id: 'chartCmp',
            xtype: 'chart',
            style: 'background:#000',
            animate: true,
            shadow: true,
            store : new Ext.data.JsonStore({
                fields : ['name', 'data1'],
                data : [{
                    name : '1',
                    data1 : 245000
                }, {
                    name : '2',
                    data1 : 240000
                }, {
                    name : '3',
                    data1 : 355000
                }, {
                    name : '4',
                    data1 : 375000
                }, {
                    name : '5',
                    data1 : 590000
                },{
                    name : '6',
                    data1 : 580600
                }]
            }),
            legend: {
                position: 'right'
            },
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['data1'],
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: 'Number of Hits',
                grid: true,
                minimum: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Month of the Year'
            }],
            series: [{
                type: 'column',
                axis: 'left',
                highlight: true,
                tips: {
                    trackMouse: true,
                    width: 140,
                    height: 28,
                    renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
                    }
                },
                label: {
                    display: 'insideEnd',
                    'text-anchor': 'middle',
                    field: 'data1',
                    renderer: Ext.util.Format.numberRenderer('0'),
                    orientation: 'vertical',
                    color: '#333'
                },
                xField: 'name',
                yField: 'data1'
            }]
            /*axes: [
                {
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data1'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Number',
                    grid: true,
                    minimum: 0
                },
                 {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month'
                }],*/
            /*series: [{
                type: 'column',
                axis: 'right',
                highlight: true,
                tips: {
                    trackMouse: true,
                    width: 140,
                    height: 28,
                    renderer: function (storeItem, item) {
                        this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1'));
                    }
                },
                label: {
                    display: 'insideEnd',
                    'text-anchor': 'middle',
                    field: 'data1',
                    renderer: Ext.util.Format.numberRenderer('0'),
                    orientation: 'vertical',
                    color: '#333'
                },
                xField: 'name',
                yField: 'data1'
            },
                {
                    type: 'line',
                    axis: 'left',
                    highlight: true,
                    tips: {
                        trackMouse: true,
                        width: 140,
                        height: 28,
                        renderer: function (storeItem, item) {
                            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1'));
                        }
                    },
                    label: {
                        display: 'insideEnd',
                        'text-anchor': 'middle',
                        field: 'data1',
                        renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'vertical',
                        color: '#333'
                    },
                    style: { 'foreground-color': '#00f' },
                    showMarkers:true,
                    markerConfig: {// 由Ext.Draw.Sprite配置项决定
                        type: 'circle',
                        size: 4,
                        radius: 4,
                        fill: '#00f',
                        'stroke-width': 0
                    },
                    xField: 'name',
                    yField: 'data1'
                }]*/
        }]

}]
});

备注:注释部分为柱状图和折线图<img src="https://img-blog.youkuaiyun.com/20140911095821723?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemx6ZGo=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

<img src="https://img-blog.youkuaiyun.com/20140911095451062?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemx6ZGo=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />