首页 > Web开发 > 详细

Change column color for columnChart in extjs

时间:2015-02-06 19:01:30      阅读:311      评论:0      收藏:0      [点我收藏+]

var store = Ext.create(‘Ext.data.JsonStore‘, {

    fields: [‘name‘, ‘data‘],

    data: [

        { ‘name‘: ‘metric one‘,   ‘data‘:10 },

        { ‘name‘: ‘metric two‘,   ‘data‘: 7 },

        { ‘name‘: ‘metric three‘, ‘data‘: 5 },

        { ‘name‘: ‘metric four‘,  ‘data‘: 2 },

        { ‘name‘: ‘metric five‘,  ‘data‘:27 }

    ]

});


Ext.create(‘Ext.chart.Chart‘, {

    renderTo: Ext.getBody(),

    width: 500,

    height: 300,

    animate: true,

    store: store,

    legend : {

        position : ‘bottom‘

    },

    axes: [

        {

            type: ‘Numeric‘,

            position: ‘left‘,

            fields: [‘data‘],

            label: {

                renderer: Ext.util.Format.numberRenderer(‘0,0‘)

            },

            title: ‘Sample Values‘,

            grid: true,

            minimum: 0

        },

        {

            type: ‘Category‘,

            position: ‘bottom‘,

            fields: [‘name‘],

            title: ‘Sample Metrics‘

        }

    ],

    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(‘data‘) + ‘ $‘);

              }

            },

            label: {

              display: ‘insideEnd‘,

              ‘text-anchor‘: ‘middle‘,

                field: ‘data‘,

                renderer: Ext.util.Format.numberRenderer(‘0‘),

                orientation: ‘vertical‘,

                color: ‘#333‘

            },

            xField: ‘name‘,

            yField: ‘data‘,

            style : {

                fill : ‘red‘

            },

            renderer : function(sprite, record, attributes){

                

                return Ext.apply(attributes, {fill:‘red‘});

            }

        }

    ]

});


技术分享

Change column color for columnChart in extjs

原文:http://angelgirl.blog.51cto.com/1695763/1612441

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!