2

我已经使用 Extjs 完成了应用程序。要求是需要在二月之后动态改变柱形图的颜色。找到附加的图像，这里我有两个基于我绘制柱形图的字段。我在图表中显示两个不同颜色的不同字段作为列。我的问题是在二月之后，我需要将一列的颜色更改为不同的颜色（在附图中标记）。但字段值将相同，只需要更改颜色。如果我通过硬编码值绘制图表，我可以轻松更改特定月份的颜色。但在这里我根据存储值动态绘制图表。谁能告诉我如何在 Extjs 中实现这一目标？在 extjs 中是否可能？. 大挪用。谢谢

柱形图

这是我的代码：

Ext.define('Ext.chart.theme.ColumnColorTheme', {
    extend: 'Ext.chart.theme.Base',
    constructor: function(config) {
        this.callParent([Ext.apply(
        {        

            axisTitleLeft: {
                font:'15px Arial',
                fill:'#0185d7'
            },
            axisTitleRight: {
                font:'15px Arial',
                fill:'#0185d7'
            },
            colors: ['rgb(50, 150, 255)','rgb(0, 70, 100)']
        }, config)]);
    }
});

Ext.define('Myweb.view.UtilizationReportGraphView',
{
    extend:'Ext.chart.Chart',
    requires:['Ext.chart.series.Column','Ext.chart.series.Line','Ext.chart.axis.Numeric','Ext.chart.axis.Category'],
    alias:'widget.utilizationView',
    id:'utilizationViewId',
    theme:'ColumnColorTheme',    
    height:window.innerHeight/2,
    width:window.innerWidth,
    store:'RevenueReportStore',
    legend:{
        position:'top'      
    },
    axes:[
    {
        type: 'Numeric',
        position: 'left',
        fields: ['dayRateBudget','dayRateActual'],
        minimum:0 
    },
    {
        type: 'Category',
        position: 'bottom',
        fields: ['month'] 
    },
    {
        title: 'Variance in %',
        type: 'Numeric',
        position: 'right',
        fields: ['utilizationPercentage']
    }
    ],
    series: [
    {
        type: 'column',
        axis: 'left',
        xField: 'month',
        yField: ['dayRateBudget','dayRateActual'],
        groupGutter:20,
        gutter:100,
        title:['Budget','Actual']
    },   
        {
        type: 'line',
        axis: 'right',
        xField: 'month',
        yField: ['utilizationPercentage'],
        markerConfig: {
            type: 'circle',
            fill:'red',
            stroke:'red',
            'stroke-width': 0
        },
        style:{
            stroke:'red',
            'stroke-width': 2
        },
        title:['Variance']

    }
    ]       
});
4

1 回答 1

2

您可以像这样renderer在列上设置函数series：

renderer: function (sprite, record, attr, index) {
    var color = '#000000'; //some logic here

    return Ext.apply(attr, {
        fill: color
    });
}

工作示例：http: //jsfiddle.net/PSPM6/

于 2013-05-21T11:01:46.990 回答