Question

我有一个条形图，我希望每个条形图以不同的颜色呈现。所以我尝试使用它们，示例代码是：

             Ext.define('Ext.chart.theme.FancyTheme',{
extend : 'Ext.chart.theme.Base',

constructor : function(config){
    this.callParent([Ext.apply({
        colors : ['#9CC5C9','#D5544F','#D5544F','#5288DB']
    },config)])
}
});

我的图表代码是：

        var tc = Ext.create('Ext.chart.Chart',{
        renderTo: Ext.getBody(),
        width: 500,
        height: 300,
        animate : true,
        insetPadding : 20,
        theme: 'FancyTheme',

但是所有的条形颜色都变成了相同的颜色，即上面例子中的“＃9cc5c9”。但我希望酒吧以主题中提到的不同颜色呈现。还有一件事我不想使用渲染功能来渲染coloirs。

所以wat是获得不同颜色的溶液。任何人都可以帮助我!!

Answer 1

抱歉，使用渲染器是正确的解决方案。 colors属性用于图表中的连续序列，例如同一绘图空间中的多个区域。

我不明白为什么你不想使用渲染器，但是这就是你需要做的所有事情：

renderer: function(sprite, record, attr, index, store) {
    var colors = ['#9CC5C9','#D5544F','#D5544F','#5288DB'];

    return Ext.apply(attr, {
        fill: colors[index % colors.length]
    });
}

Answer 2

您还可以展开Ext.chart.series.Bar。例如：

Ext.define('Ext.chart.series.MyBar', {
    extend: 'Ext.chart.series.Bar',
    //type: 'mybar',
    alias: 'series.mybar',

    getPaths: function() {
        this.callParent(arguments);

        var items = this.items, 
            i, iLen = items.length,
            colors = this.colorArrayStyle,
            colorsLength = colors && colors.length || 0;
        for (var i = 0; i < iLen; ++i) {
            items[i].attr.fill = colors[i % colorsLength];
        }
    }
});

然后在系列中，您应该使用mybar而不是bar。

Extjs4更改条形图中的每个条形颜色

2 个答案: