[ExtJs]柱狀圖，改變每條柱子的顏色

[ExtJs]柱狀圖，改變每條柱子的顏色

ExtJs的柱狀圖的畫法其實與《【ExtJs】折線圖》（點擊開啟連結）的畫法幾乎完全一樣，痛點在於各個柱子的顏色。ExtJs對於柱狀圖的顏色，並沒有單獨為其開放獨立的參數。因此還是與《【ExtJs】表格控制項Grid的增刪改查，利用renderer讓操作列actioncolumn使用文字而不是表徵圖》（點擊開啟連結）一樣，要自己單獨設定東西，必須使用到渲染器。如果不設定，它畫出來的柱狀圖，每次都是同樣的顏色。

網上對於這部分東西的說明，僅有極少部分的資料。而且把代碼寫得天花龍鳳，根本讀不懂。下面使用一個極其簡單的例子說明這個問題。

 

一、基本目標

繪製如下的柱狀圖，同時每條柱子不同顏色。

 

二、製作過程

首先還是與《【ExtJs】折線圖》（點擊開啟連結）一樣，定義一個模型，在此模型上建立資料中心store，資料中心的資料可以自己寫，也可以從後端頁面擷取。

 

 Ext.define('graphData',{extend:'Ext.data.Model',fields:[{name:'graphName',type:'string'},{name:'graphData',type:'int'}]});var graphDataStore=Ext.create('Ext.data.Store',{model:'graphData',data:[{graphName:A,graphData:700},{graphName:B,graphData:800},{graphName:C,graphData:600},{graphName:D,graphData:500}]});

之後先定義一個顏色數組，為下面的渲染色做好準備。

 

 

var colors = ['#6E548D','#94AE0A','#FF7348','#3D96AE'];

最後，則繪製這個柱狀圖，渲染器放在series的屬性項中：

 

 

var chart1 = new Ext.chart.Chart({width: 480,height: 320,animate: true,//使用動畫store: graphDataStore,renderTo: Ext.getBody(),shadow: true,//使用陰影axes: [{//x軸與y軸的聲明type: 'Numeric',position: 'left',grid: true}, {type: 'Category',position: 'bottom',fields: 'graphName'}],  series: [{type: 'column',axis: 'bottom',xField: 'graphName',yField: 'graphData',//x與y軸的資料聲明//此渲染器的存在能夠使每條柱子的顏色，與上方聲明的顏色數組相同renderer: function(sprite, storeItem, barAttr, i, store) {      barAttr.fill = colors[i];return barAttr;  }}]});

 

 

<script type=text/javascript src=../js/ext-all.js></script><script type=text/javascript src=../js/bootstrap.js></script><script type=text/javascript src=../js/ext-lang-zh_CN.js></script>