extjs ColumnChart设置不同的颜色实现代码

ExtJS 的 ColumnChart 是一个常用的图表类型，可以用来展示数据的状况和趋势。在绘制 ColumnChart 的时候，我们可以设置不同的颜色来突出展示不同的数据，比如高于平均水平的数据可以设置为红色，低于平均水平的数据可以设置为绿色。以下是实现该功能的完整攻略：

1. 设置列颜色

第一种方法是在 ColumnChart 中设置每一列的颜色，可以通过设置 series 的 colors 属性来实现。该属性接受一个数组，数组中的每个元素表示一列的颜色。例如：

Ext.create('Ext.chart.Chart', {
    //...
    series: [{
        type: 'column',
        //...
        colors: ['#FF0000', '#00FF00', '#0000FF']
    }]
});

2. 根据数据动态设置颜色

第二种方法是根据数据的值动态设置每一列的颜色。可以通过设置 series 的 renderer 函数来实现。该函数接受两个参数：sprite 和 record，sprite 表示 ColumnChart 中的一个柱形，record 表示该柱形对应的数据记录。可以根据 record 的值来设置柱形的颜色。例如：

Ext.create('Ext.chart.Chart', {
    //...
    series: [{
        type: 'column',
        //...
        renderer: function(sprite, record) {
            var value = record.get('value');
            if (value > 100) {
                sprite.setAttributes({
                    fill: '#FF0000'
                }, true);
            } else {
                sprite.setAttributes({
                    fill: '#00FF00'
                }, true);
            }
        }
    }]
});

在上面的例子中，如果数据的值大于 100，那么柱形的颜色就会被设置为红色，否则就是绿色。

以上就是 ExtJS ColumnChart 设置不同颜色的代码示例，以上代码仅供参考，具体实现需要根据实际需求进行调整。