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

Posted 2023-02-26

【中文标题】如何使用 Extjs 动态改变柱形图的颜色？

【英文标题】：How to change color of column graph dynamically using 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']

    
    ]       
);

【参考方案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 获取记录。