码迷,mamicode.com
首页 > Web开发 > 详细

Change column color for columnChart in extjs

时间:2015-02-06 19:03:26      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:column color extjs   column chart color   

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

标签:column color extjs   column chart color   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!