[Ext JS 4] 实战之Chart, Column Chart 定制颜色

前言

在Ext js 中,可以绘制柱状图和条状图。

柱状图 -- Column chart,  柱子是竖直方向的。

条状图 -- Bar Chart, 柱子是水平方向的。

上面的例子一个条状图的例子。

默认状况下， Ext Js 会使用 绿色，蓝色，深红，淡红这样的顺序来配色。

如果查看Ext js 源代码， 在 chart.theme目录下的 Base.js 文件中，有以下的代码,

colors: [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],

而实际开发过程中， 我们有给图形定制自己的颜色的需求， 如何实现？

总体来说，实现的方法有两种：

1.  定义新的theme ,并给出自己需要的颜色序列。(在图绘制之前)

2. 配置 chart  的series  item 的 renderer.(图绘制前后都可以)

下面细部来看一下两种方式的实现方式。

定义新的Chart Theme 来定制图形颜色

1. 定义新的Theme, 例如：

var colors = [‘#6E548D‘,‘#94AE0A‘,‘#FF7348‘,‘#3D96AE‘];
Ext.define(‘Ext.chart.theme.MyFancy‘, {
    extend: ‘Ext.chart.theme.Base‘,       
    constructor: function(config) {
        this.callParent([Ext.apply({
            colors: colors
        }, config)]);
    }
});

2.  在Chart 中， 使用这个Theme

var chart = Ext.create(‘Ext.chart.Chart‘,{
    	    theme: ‘MyFancy‘,
            animate: true,
            shadow: true,
            store: store,
            legend: {
                position: ‘top‘
            },
            axes: [{
                type: ‘Numeric‘,
                position: ‘left‘,
                //position: ‘bottom‘,   
                fields: [‘buildpass‘, ‘buildfail‘, ‘sanitypass‘, ‘sanityfail‘],
                title: ‘Times‘,
                grid: true,
                label: {
                    renderer: function(v) {
                        //return String(v).replace(/(.)00000$/, ‘.$1M‘);
                    	//return String(v).replace(/(.)0000000$/, ‘$1‘);
                    	return String(v);
                    }
                }
            }, {
                type: ‘category‘,
                //position: ‘left‘,
                position: ‘bottom‘,
                fields: [‘day‘],
                title: ‘Date‘
            }],
            series: [{
                //type: ‘bar‘,
                type: ‘column‘,
                //axis: ‘bottom‘,
                //showInLegend: false,
                axis: ‘left‘,
                gutter: 80,
                xField: ‘day‘,
                yField: [‘buildpass‘, ‘buildfail‘, ‘sanitypass‘, ‘sanityfail‘],
                label: {
                    display: ‘insideEnd‘,
                    field: [‘buildpass‘, ‘buildfail‘, ‘sanitypass‘, ‘sanityfail‘]
                },
                stacked: true,
                tips: {
                    trackMouse: true,
                    width: 65,
                    height: 28,
                    renderer: function(storeItem, item) {
                        //this.setTitle(String(item.value[1] / 1000000) + ‘M‘);
                    	this.setTitle(String(item.value[1]));
                    }
                },
                listeners:{
                	itemclick:{
                		fn:function(){alert("11");}
                	}
                } 
            }]
        });

除了颜色之外， Theme 还可以定义其他的一些配置： 像

    Ext.define(‘Ext.chart.theme.Fancy‘, {
        extend: ‘Ext.chart.theme.Base‘,
        
        constructor: function(config) {
            this.callParent([Ext.apply({
                axis: {
                    stroke: baseColor
                },
                axisLabelLeft: {
                    fill: baseColor
                },
                axisLabelBottom: {
                    fill: baseColor
                },
                axisTitleLeft: {
                    fill: baseColor
                },
                axisTitleBottom: {
                    fill: baseColor
                },
                colors: colors
            }, config)]);
        }
    });

设置Series item 的render

有的状况可能图已经绘制出来了， 使用theme 就无效了。

这里以柱状图为例。

在创建Chart 的时候， 我们设置了一些Series ,

比如说一个柱状图和一个折线图，  这样Series 就有两个了。

使用 iChart.series.items[0]，iChart.series.items[1] 就可以分别得到每个Series 了。

(这里的iChart 是创建出来的Chart 对象)

        iChart.series.items[0].renderer = function(sprite, storeItem, barAttr, i, store) {
        	barAttr.fill = colors[0];
            return barAttr;
        };

这里 i 的参数就是每个柱子的序列号(比如图有12 根柱子就是 0 到 11 了)

接下来有一个问题， 如果这个柱状图的每个柱子又有三个子柱的话（或stacked 为true, 三个柱子堆叠在一起; 或stacked 为false, 三个柱子group 方式水平）， 如何设置颜色？

                renderer: function(sprite, storeItem, barAttr, i, store) {
                    barAttr.fill = colors[i % 3];
                    return barAttr;
                },

图的颜色改变了， 如果有Legend 的话， Legend 也要修改才能匹配的上：

        iChart.series.items[0].getLegendColor = function(index) {
	        return colors[0];
        };

总结

配置 chart  的series  item 的 renderer，开上去可以，

但是如果遇到有子柱 的过滤时， 就是点击legend  进行隐藏和显示的话，颜色会出现错乱， 所以还是要使用Theme的方式。

具体开发使用哪种方式， 就要根据具体的状况来对待了。

[Ext JS 4] 实战之Chart, Column Chart 定制颜色,古老的榕树,5-wow.com