[Ext JS 4] Chart in practice, Column Chart custom color

Preface

In Ext js, you can draw a bar chart and a bar chart.

Column chart: Column chart. The Column is in the vertical direction.

Bar Chart: Bar Chart. The column is horizontal.

The preceding example shows a bar chart.

By default, Ext Js uses the green, blue, dark red, and light red colors.

If you view the Ext js source code, the following code is available in the Base. js file under the chart. theme directory,

colors: [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],

In fact, it is hard to understand that Ext js uses the Base topic by default to configure the color of the image.

In the actual development process, we need to customize our own colors for the graphics. How can we achieve this?

In general, there are two implementation methods:

1. Define the new theme and give the color sequence you need. (Before drawing)

2. Configure the renderer of the series item of the chart. (You can set the renderer before and after the chart is drawn)

The following describes the implementation methods of the two methods.

Define new Chart Theme to customize the image color

1. define a new Theme, for example:

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

A Theme of MyFancy is defined here.

2. Use the Theme in the Chart

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 'is the theme method.

In addition to color, Theme can also define other configurations:

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

Set Series item render

Some situations may have been drawn, and theme is ineffective.

The column chart is used as an example.

When creating the Chart, we set Series,

For example, a column chart and a line chart have two Series columns.

Use iChart. series. items [0], iChart. series. items [1] to get each Series.

(Here iChart is the Chart object created)

        iChart.series.items[0].renderer = function(sprite, storeItem, barAttr, i, store) {        barAttr.fill = colors[0];            return barAttr;        };

You can use the above method to change the color of the graph.

Here, the I parameter is the serial number of each column (0 to 11 for 12 columns)

Next there is a problem. If each column in the bar chart has three sub-columns (or stacked is true, the three columns are stacked together; or stacked is false, three columns in the group mode), how to set the color?

                renderer: function(sprite, storeItem, barAttr, i, store) {                    barAttr.fill = colors[i % 3];                    return barAttr;                },

Use the above method and use 3 for loop.

The color of the graph has changed. If Legend exists, Legend must be modified to match the following:

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

Summary

Configure the renderer of the series item of the chart. It can be enabled,

However, if a sub-column is used for filtering, you can click legend to hide and display the sub-column, and the color will be disordered. Therefore, you must use Theme.

The specific development method should be based on the specific situation.