ExtJS - 堆积条形图

Question

How to offset the items in a stacked bar chart for any given bar?

Bar 1: 4 items (150,290,200,50)
Bar 2: only 2 items (--, --, 240,45)

I want to start the item with value 240 at a given offset instead of starting at 0 ( ex: I want to start it at 600 and show 240 from there). From 0 to 600, it will be blank/white space.

I can post my example code if that's of any help.

Thank you.

Answer 1

There is no straight forward settings to do this. You will have to override the renderer and provide your custom styling to achieve the offset effect. The Ext.chart.series.Series does have a renderer method.

The method takes five parameters:

1. sprite - A class with all sprite information.
2. record - The current record being rendered.
3. attributes - Attributes used of the drawing.
4. index - index of the record being processed.
5. store - store used for the chart.

You need to check if your record contains a null value. If so, you need to modify the attributes object with appropriate values and return it back. You can view the default renderer method from the source code.

renderer: function(sprite,record,attributes,index,store) {
    //Modify the attributes object according to your needs 
    return attributes;
},

But I couldn't come up with a correct logic to modify the drawing values stored in attributes class.

Answer 2

The record argument of the renderer function tells you which record is being rendered.