Extjs更改堆积条形图中的条形颜色

如何解决Extjs更改堆积条形图中的条形颜色

| 让我们以这个例子为例...如何更改这些条的颜色？ 我知道我可以通过渲染器更改它，但不会更改图例。 我尝试使用：

style: {fill: \'red\'}

但是它改变了曾经的酒吧的颜色 我试图将颜色放入数组，它不起作用。 我试图将每种样式放入数组中，如下所示：

style: [{fill: \'red\'},{fill: \'green\'},{fill: \'blue\'}]

但这也不起作用，因为我可以将标题放在数组中，例如：

title: [\'title1\',\'title2\',\'title3\']

我认为它（样式）应该也可以，但是不能。 那么，如何更改每个“数据”栏的颜色？     

解决方法

        条形颜色实际上取决于图表的主题：

Ext.create(\'Ext.chart.Chart\',{
    theme: \'myTheme\'
    //the remainder of your code...
});

为了使用自定义颜色，您将需要扩展现有的\'Base \'主题，如自定义区域图表示例中所示。     ,        图表使用主题作为混合 因此，您可以直接使用名为themeAttrs的主题属性。 例如，如果您在柱形图/堆积柱形图的构造函数中，想要更改柱形的颜色，可以指定

this.themeAttrs.colors = [\'#F2C72B\',\'#a5c249\',\'#E88712\',\'#9D5FFA\'];

    ,        

Ext.onReady(function() 
{

  Ext.create(\'Ext.window.Window\',{
    title: \'Pie1 Chart\',height: 400,layout: \'fit\',width: 400,items: 
    [{
      xtype: \'chart\',animate:false,insetPadding:0,legend: 
    {
        position: \'right\'
        },shadow: true,store: 
    {
        fields: 
    [{
          name: \'category\',type: \'string\'
        },{
          name: \'data\',type: \'float\'
        }],data: 
    [{
          category: \'Alive\',data: 1.5
        },{
          category: \'Dead\',data: 2 
        },{
          category: \'Standby\',data: 1
        }]
      },series: [{
        type: \'pie\',field: \'data\',colorSet: [\'#0000FF\',\'#FFffff\',\'#00FF00\'],showInLegend: true,<!--It is use to display data in which color.-->
        highlight: {
          segment: {
            margin: 20
          }
        },label: {
          field: \'category\',display: \'rotate\',contrast: true,font: \'18px Arial\'
        }
      }]
    }]
  }).show();  
});

使用colorSet可以更改颜色。     ,        我决定添加完整的代码：

Ext.require(\'EAM.view.chart.*\');
Ext.define(\'EAM.view.chart.integral.IntegralChart\',{
    extend : \'Ext.chart.Chart\',alias : \'widget.GroupsIntegralChart\',animate : true,shadow : true,// theme : \'Browser:gradients\',initComponent : function()
    {
        var me = this;
        me.themeAttrs.colors =
        [
            \'orange\',\'red\',\'blue\',\'green\',];
        me.callParent(arguments);
    },...

    ,        如果您不想使用主题，可以使用它（至少对我有用）：

this.series = [{
type: \'column\',axis: \'left\',showInLegend : true,xField: \'f1\',style :{
    fill :  \'#ff00ff\',\'stroke-width\': 3,width: 20
},renderer: function(sprite,storeItem,barAttr,i,store) {
    barAttr.fill = \'#ff00ff\';
    barAttr.width = 20;
    return barAttr;
},title : \'title\',yField: \'f2\'
}]

请注意，您必须将颜色分成两行（我认为ExtJS有时有点愚蠢的框架）。     ,        我正在使用Ext JS 5.0  无需担心，只需串联包含颜色配置即可。

series : [{
        type : \'bar\',colors:[\'#f23f3f\',\'#ff8809\',\'#ff0\',\'#0039a6\',\'#00ee88\',\'#ff8aed\'],xField : [\'Q1\']
        yField : [\'Critical\',\'Major\',\'Minor\',\'Warning\',\'Informational\',\'Indeterminent\']
}]