柱状图中的列颜色基于extJS 3.4中存储的值

时间:2013-09-04 10:53:04

标签: extjs charts

我有一个jsonstore

var rankingStore = new Ext.data.JsonStore({
    url: './get-ranking-stats.php',
    root: 'item',
    fields: ['name', 'click', 'foto','pdf', 'gid', 'type'],
    baseParams: {end: getToday(), start: getOneWeekBefore(), typ: 'all'},
    autoLoad: true
})

和基于它的柱形图:

var statis2 =  new Ext.Panel({
    title: 'Ranking',
    width: '60%',
    height: 500,
    items: {
        xtype: 'columnchart',
        store: rankingStore,
        xField: 'name',
        id: 'mainChart2',
        yField: 'click',
        extraStyle: {
           xAxis: {
                labelRotation: -90
            }
        },
    series: [{
            type: 'column',
            displayName: 'Click counter',
            yField: 'click',
            style: {
                mode: 'stretch',
                color:0x99BBE8
            }
        }]



    }
});

所有图案都具有相同的颜色。我想要的是根据jsonstore的'type'值来获得不同的颜色。如何创建这样的规则?

1 个答案:

答案 0 :(得分:3)

用户在绘制图表之前的事件之后,在图表中添加自己的自定义颜色。

beforerender: function(chart, record, index, series){
if(record.data.type=="Somthing"){
// add own custom css
    }
    },