0

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

             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'。但我希望条形图以主题中提到的不同颜色呈现。我不想使用渲染功能来渲染颜色的另一件事。

所以 wat 是获得不同颜色的解决方案。谁能帮我吗！！

4

2 回答 2

1

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

我不明白您为什么不想使用渲染器，但您需要做的就是：

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

    return Ext.apply(attr, {
        fill: colors[index % colors.length]
    });
}
于 2012-11-29T18:06:25.587 回答
1

您还可以扩展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.

于 2012-11-30T08:02:10.073 回答