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

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...