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

| 让我们以这个例子为例...如何更改这些条的颜色？ 我知道我可以通过渲染器更改它，但不会更改图例。 我尝试使用： 
style: {fill: \'red\'}
但是它改变了曾经的酒吧的颜色 我试图将颜色放入数组，它不起作用。 我试图将每种样式放入数组中，如下所示： 
style: [{fill: \'red\'}, {fill: \'green\'}, {fill: \'blue\'}]
但这也不起作用，因为我可以将标题放在数组中，例如： 
title: [\'title1\', \'title2\', \'title3\']
我认为它（样式）应该也可以，但是不能。 那么，如何更改每个“数据”栏的颜色？     
2020-02-24 7 条评论
分享

没有找到相关结果

    已邀请:

    孤捷侩

            条形颜色实际上取决于图表的主题： 
    Ext.create(\'Ext.chart.Chart\', {
    theme: \'myTheme\'
    //the remainder of your code...
});
    为了使用自定义颜色，您将需要扩展现有的\'Base \'主题，如自定义区域图表示例中所示。     
    2020-02-24 0 0
    分享

    氏脑

            图表使用主题作为混合 因此，您可以直接使用名为themeAttrs的主题属性。 例如，如果您在柱形图/堆积柱形图的构造函数中，想要更改柱形的颜色，可以指定 
    this.themeAttrs.colors = [\'#F2C72B\',\'#a5c249\',\'#E88712\',\'#9D5FFA\'];
        
    2020-02-24 0 0
    分享

    赐黄

            
    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可以更改颜色。     
    2020-02-24 0 0
    分享

    殿虫

            我决定添加完整的代码： 
    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);
    },
...
        
    2020-02-24 0 0
    分享

    刷骸码

            如果您不想使用主题，可以使用它（至少对我有用）： 
    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有时有点愚蠢的框架）。     
    2020-02-24 0 0
    分享

    钨蜡唤喉晤

            我正在使用Ext JS 5.0  无需担心，只需串联包含颜色配置即可。 
    series : [{
        type : \'bar\',
        colors:[\'#f23f3f\',\'#ff8809\',\'#ff0\',\'#0039a6\',\'#00ee88\',\'#ff8aed\'],
        xField : [\'Q1\']
        yField : [\'Critical\', \'Major\', \'Minor\', \'Warning\', \'Informational\',   \'Indeterminent\']
}]
        
    2020-02-24 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.043258905410767