[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"],

其实不难理解， Ext js 默认使用Base 这种主题来配置图形的颜色。

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

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

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)]);
    }
});

这里定义了一个MyFancy 的Theme

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: 'MyFancy' 就是使用这个 theme 的方式。

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