如何使用Extjs動態地改變列圖的顏色？

我已經使用Extjs完成了應用程序。要求在2月份之後動態地更改柱狀圖的顏色。找到附加的圖像，在這裏我有兩個字段的基礎上，我的情節柱圖。我在圖中顯示了兩個不同顏色的字段。 我的問題是在2月份之後，我需要將一列的顏色更改爲不同的顏色（標記在附圖中）。但字段值將是相同的，只需要改變顏色。如果我通過硬編碼值繪製圖表，很容易我可以改變特定月份的顏色。但在這裏我正在根據商店價值動態地繪製圖表。 任何人都可以告訴我如何在Extjs中實現這一個？是否有可能在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'] 

    } 
    ]  
});

來源

2013-05-21 Ramesh Lamani

您可以在列series設置renderer功能是這樣的：

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

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

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

來源

2013-05-21 11:01:46

謝謝，你能給我清楚的想法嗎？ –

看看這個例子：http://docs.sencha.com/extjs/4.1.1/#!/example/charts/BarRenderer.html –

謝謝，我會檢查鏈接，讓你.. –

如何使用Extjs動態地改變列圖的顏色？

回答

相關問題