EXTJS4.2 chart 柱状图

chart 柱状图

Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);

var store_Watch = new Ext.data.JsonStore({
    fields: ['ConversationId', 'ConversationSegContent', 'VotesCount', 'ParticipateCount'],//选项的 SegmentType = 2
    data: [{
        ConversationId: '1',
        ConversationSegContent: '我要去北京哦',
        VotesCount: 245000,
        ParticipateCount: 3000000
    }, {
        ConversationId: '2',
        ConversationSegContent: '我要去广州哦',
        VotesCount: 200,
        ParticipateCount: 3500000
    }, {
        ConversationId: '3',
        ConversationSegContent: '我要去上海哦',
        VotesCount: 19999,
        ParticipateCount: 2000000
    }, {
        ConversationId: '4',
        ConversationSegContent: '我要去深圳哦',
        VotesCount: 200000,
        ParticipateCount: 3200000
    }, {
        ConversationId: '5',
        ConversationSegContent: '我要去美国哦',
        VotesCount: 90000,
        ParticipateCount: 3500000
    }, {
        ConversationId: '6',
        ConversationSegContent: '我要去加拿大哦',
        VotesCount: 395000,
        ParticipateCount: 6800000
    }, {
        ConversationId: '7',
        ConversationSegContent: '我要去火星哦',
        VotesCount: 580600,
        ParticipateCount: 8500000
    }]
});

var chart = Ext.create('Ext.chart.Chart', {
    animate: true,
    style: 'background:#fff',
    shadow: false,
    store: store_Watch,
    axes: [{
        type: 'Numeric',
        position: 'bottom',
        fields: ['VotesCount'],
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
        title: '投票项个数',
        minimum: 0
    }, {
        type: 'Category',
        position: 'left',
        fields: ['ConversationSegContent'],
        title: '投票项'
    }],
    series: [{
        type: 'bar',
        axis: 'bottom',
        tips: {
            trackMouse: true,//数据提示框是否跟着鼠标移动
            width: 180,//提示框宽度
            height: 28,
            renderer: function (storeItem, item) {
                this.setTitle(storeItem.get('ConversationSegContent') + ' | 投票项个数' + storeItem.get('VotesCount') + ' ');
            }
        },
        label: {
            display: 'insideEnd',
            field: ['VotesCount'],
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'horizontal',
            color: '#333',
            'text-anchor': 'middle',
            contrast: true
        },
        xField: 'ConversationSegContent',
        yField: ['VotesCount'],
        //color renderer
        renderer: function (sprite, record, attr, index, store) {
            var fieldValue = Math.random() * 20 + 10;
            var value = record.get('VotesCount');
            var color;
            //var color = ['rgb(213, 70, 121)',
            //             'rgb(44, 153, 201)',
            //             'rgb(146, 6, 157)',
            //             'rgb(49, 149, 0)',
            //             'rgb(249, 153, 0)'][value];

            //根据数值的不同显示不同的颜色
            if (value < 100000) {
                color = '#00FF00';
            }
            else if (value > 100000 && value < 200000) {
                color = "#00FFFF";
            }
            else if (value > 200000 && value < 300000) {
                color = '#FF00FF';
            }
            else if (value > 300000 && value < 400000) {
                color = '#FF0060';
            }
            else if (value > 400000) {
                color = '#FF0000';
            }

            return Ext.apply(attr, {
                fill: color
            });
        }
    }]
});

var win_Watch = Ext.create('Ext.Window', {
    width: 900,
    height: 600,
    minHeight: 400,
    minWidth: 550,
    maximizable: true,
    title: '投票结果',
    layout: "fit",                        //窗口布局类型
    modal: true, //是否模态窗口，默认为false
    resizable: false,
    closeAction: 'hide',
    plain: true,
    draggable: true,
    border: false,
    items: chart,
    tbar: [{
        text: 'Reload Data',
        handler: function () {

        }
    }]
});