[ExtJs] bar chart, changing the color of each column, extjs bar chart

[ExtJs] bar chart, changing the color of each column, extjs bar chart

The column chart of ExtJs is almost the same as that of [ExtJs] line chart (click to open the link). The difficulty lies in the color of each column. ExtJs does not provide independent parameters for the color of the bar chart. Therefore, just like adding, deleting, modifying, and querying the "ExtJs" table control Grid, using renderer to use text instead of icons for the actioncolumn of the operation column (click to open the link), you need to set items independently, the Renderer must be used. If this parameter is not set, the bar chart is the same color each time.

There is only a small amount of information about this part on the Internet. I can't understand the code. The following is an extremely simple example to illustrate this problem.

I. Basic Objectives

Draw the following bar chart with different colors for each column.

Ii. Production Process

First, define a model like the [ExtJs] line chart (click to open the link) to create a data center store on this model. You can write data in the data center by yourself, you can also obtain it from the backend page.

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

Then define a color array to prepare the rendering colors below.

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

Finally, draw the bar chart and place the Renderer in the series attribute item:

Var chart1 = new Ext. chart. chart ({width: 480, height: 320, animate: true, // use the animation store: graphDataStore, renderTo: Ext. getBody (), shadow: true, // use the shadow axes: [{// declare type: 'numeric ', position: 'left', grid: true} on the X axis and Y axis }, {type: 'category ', position: 'bottom', fields: 'graphname'}], series: [{type: 'column', axis: 'bottom ', xField: 'graphname', yField: 'graphdata', // data declaration of x and Y axes // the existence of this Renderer can make the color of each column, same as the color array declared above, renderer: function (sprite, storeItem, barAttr, I, store) {barAttr. fill = colors [I]; return barAttr ;}}]});

Iii. Summary

The code for the entire column.html page is as follows:

<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">