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

前言

[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 还可以定义其他的一些配置: 像

    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;
                },

使用以上方式, 用3 来循环。


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

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


总结

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

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

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


[Ext JS 4] 实战之Chart, Column Chart 定制颜色,布布扣,bubuko.com

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

上一篇:Train Wreck


下一篇:Quartus II 18.x Modelsim仿真设置