有声小说下载_[Ext JS 4] 實(shí)戰之Chart, Column Chart 定制顏色| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS 4] 實(shí)戰之Chart, Column Chart 定制顏色

## [Ext JS 4] 實(shí)戰之Chart, Column Chart 定制顏色
### 前言
![](/upload/picture/2022-09-29/upload_c59c598cea94bd5b7571b449cb6181a1.png)
在Ext js 中,可以繪制柱狀圖和條狀圖。
柱狀圖 -- Column chart,  柱子是豎直方向的。
條狀圖 -- Bar Chart, 柱子是水平方向的。
上面的例子一個(gè)條狀圖的例子。
默認狀況下， Ext Js 會(huì )使用 綠色，藍色，深紅，淡紅這樣的順序來(lái)配色。
如果查看Ext js 源代碼， 在 chart.theme目錄下的 Base.js 文件中，有以下的代碼,
```css
colors: [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],
```
其實(shí)不難理解， Ext js 默認使用Base 這種主題來(lái)配置圖形的顏色。
而實(shí)際開(kāi)發(fā)過(guò)程中， 我們有給圖形定制自己的顏色的需求， 如何實(shí)現？
總體來(lái)說(shuō)，實(shí)現的方法有兩種：
1.  定義新的theme ,并給出自己需要的顏色序列。(在圖繪制之前)
2. 配置 chart  的series  item 的 renderer.(圖繪制前后都可以)
下面細部來(lái)看一下兩種方式的實(shí)現方式。

### 定義新的Chart Theme 來(lái)定制圖形顏色
1. 定義新的Theme, 例如：
```css
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)]);
    }
});
這里定義了一個(gè)MyFancy 的Theme
2.  在Chart 中， 使用這個(gè)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');
returnString(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' 就是使用這個(gè) theme 的方式。
除了顏色之外， Theme 還可以定義其他的一些配置： 像
```css
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
有的狀況可能圖已經(jīng)繪制出來(lái)了， 使用theme 就無(wú)效了。
這里以柱狀圖為例。
在創(chuàng  )建Chart 的時(shí)候， 我們設置了一些Series ,
比如說(shuō)一個(gè)柱狀圖和一個(gè)折線(xiàn)圖，  這樣Series 就有兩個(gè)了。
使用 iChart.series.items[0]，iChart.series.items[1] 就可以分別得到每個(gè)Series 了。
(這里的iChart 是創(chuàng  )建出來(lái)的Chart 對象)
```css
  iChart.series.items[0].renderer = function(sprite, storeItem, barAttr, i, store) {
        	barAttr.fill = colors[0];
			return barAttr;
        };
```
使用以上方式就可以變換圖的顏色了。
這里 i 的參數就是每個(gè)柱子的序列號(比如圖有12 根柱子就是 0 到 11 了)
接下來(lái)有一個(gè)問(wèn)題， 如果這個(gè)柱狀圖的每個(gè)柱子又有三個(gè)子柱的話(huà)（或stacked 為true, 三個(gè)柱子堆疊在一起; 或stacked 為false, 三個(gè)柱子group 方式水平）， 如何設置顏色？
```css
renderer: function(sprite, storeItem, barAttr, i, store) {
                    barAttr.fill = colors[i % 3];
return barAttr;
                },
```

使用以上方式， 用3 來(lái)循環(huán)。

圖的顏色改變了， 如果有Legend 的話(huà)， Legend 也要修改才能匹配的上：
```css
        iChart.series.items[0].getLegendColor = function(index) {
return colors[0];
        };

```
### 總結
配置 chart  的series  item 的 renderer，開(kāi)上去可以，
但是如果遇到有子柱 的過(guò)濾時(shí)， 就是點(diǎn)擊legend  進(jìn)行隱藏和顯示的話(huà)，顏色會(huì )出現錯亂， 所以還是要使用Theme的方式。
具體開(kāi)發(fā)使用哪種方式， 就要根據具體的狀況來(lái)對待了。

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS 4] 實(shí)戰之Chart, Column Chart 定制顏色

網(wǎng)站導航