Question

我使用Extjs完成了应用程序。需要在2月之后动态更改列图的颜色。找到附加的图像，这里我有两个基于我绘制列图的字段。我在图表中显示了两个不同颜色的不同字段作为列。 我的问题是在2月份之后，我需要将一列的颜色更改为不同的颜色（在附加图片中标记）。但是字段值将是相同的，只需要改变颜色。如果我通过硬编码值绘制图形，很容易我可以改变特定月份的颜色。但是我在这里动态地根据商店价值绘制图表。 能告诉我如何在Extjs中实现这一目标吗？是否可以在extjs中使用？。非常合适。谢谢

Column graph

这是我的代码：

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']

    }
    ]       
});

Answer 1

您可以在列renderer上设置series功能，如下所示：

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

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

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

如何使用Extjs动态更改列图的颜色？

1 个答案: