5

この例を見てみましょう...これらのバーの色を変更するにはどうすればよいですか?

レンダラーで変更できることはわかっていますが、凡例は変更されません。

私は使用しようとしました：

style: {fill: 'red'}

しかし、それは今までのバーの色を変えます

色を配列に入れようとしましたが、機能しません。

次のように、各スタイルを配列に入れようとしました。

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

しかし、次のようにタイトルを配列に入れることができるため、どちらも機能しません。

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

私はそれ（スタイル）もうまくいくはずだと思っていましたが、うまくいきませんでした。

では、各「データ」バーの色を変更するにはどうすればよいですか?

4

6 に答える 6

10

棒の色は、実際にはチャートのテーマによって決まります:

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

カスタム カラーを使用するには、カスタム エリア チャートの例のように、既存の「ベース」テーマを拡張する必要があります。

于 2011-06-15T20:39:55.670 に答える
4

Chart は Theme を mixin として使用します

したがって、themeAttrs というテーマ プロパティを直接使用できます。

たとえば、縦棒グラフ/積み上げ縦棒グラフのコンストラクタを使用している場合、列の色を変更したい場合は指定できます

this.themeAttrs.colors = ['#F2C72B','#a5c249','#E88712','#9D5FFA'];
于 2013-03-28T10:36:09.827 に答える
3 
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 を使用すると、色を変更できます。

于 2012-11-28T11:28:06.143 に答える
0

私は Ext JS 5.0 を使用しています。心配する必要はありません。色の設定を順番に含めるだけです。

series : [{
        type : 'bar',
        colors:['#f23f3f','#ff8809','#ff0','#0039a6','#00ee88','#ff8aed'],
        xField : ['Q1']
        yField : ['Critical', 'Major', 'Minor', 'Warning', 'Informational',   'Indeterminent']
}]
于 2014-12-31T13:33:36.950 に答える
0

themeを使用したくない場合は、これを使用できます（少なくとも私にとってはうまくいきました）：

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

色を 2 つの異なる行に配置する必要があることに注意してください (ExtJS はちょっとばかげたフレームワークだと思います)。

于 2013-12-03T14:41:36.993 に答える