如何使用 Extjs 动态改变柱形图的颜色？答案

【问题标题】：How to change color of column graph dynamically using Extjs?如何使用 Extjs 动态改变柱形图的颜色？
【发布时间】：2013-05-21 10:58:27
【问题描述】：

我已经使用 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']

    }
    ]       
});

【问题讨论】：

标签： extjs extjs4 extjs4.1 extjs-mvc

【解决方案1】：

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

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

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

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

【讨论】：

看这个例子：docs.sencha.com/extjs/4.1.1/#!/example/charts/BarRenderer.html
我已经尝试了上面的链接。它们只有一列并且在变化，但我有两列，我需要更改一列颜色。同时循环一些时间记录也是未定义的。
我添加了一个工作示例的链接。根据文档中的评论，您可以使用chart.series.items[known series index].items[index].storeItem 获取记录。