Ext4修改column chart的住形体的背景颜色-优快云博客

使用ExtJS创建了一个柱状图，该图表展示了三种不同的云服务（云应用服务、云数据服务和云存储服务）的消费总金额和总数量，并通过动态加载的数据实现了图表的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.onReady(function() {
   var store = Ext.create('Ext.data.JsonStore', {
      fields : ['name', 'money', 'count'],
      data : [{
         'name' : '云应用服务',
         'money' : 10000,
         'count' : 20000
        }, {
         'name' : '云数据服务',
         'money' : 40000,
         'count' : 10000
        }, {
         'name' : '云存储服务',
         'money' : 30000,
         'count' : 25000
        }]
     });
   Ext.create('Ext.chart.Chart', {
      renderTo : Ext.getBody(),
      width : 500,
      height : 300,
      animate : true,
      store : store,
      axes : [{
         type : 'Numeric',
         position : 'left',
         fields : ['money', 'count'],
         maximum : 100000,
         title : '总金额和总数量',
         minimum : 0
        }, {
         type : 'Category',
         position : 'bottom',
         fields : ['name'],
         title : '服务'
        }],
      legend : {
       position : 'bottom',
       labelColor : '#003399'
      },
      series : [{
         type : 'column',
         axis : 'left',
         style:{
                         'colors':['#FF6666', '#ABC7EC'] //颜色
         },
         xField : 'name',
         yField : ['money', 'count'],
         title : ['服务消费总金额', '服务总数量'],
         label : {
          field : ['money', 'count'],
          display : 'outside',
          renderer : function(v) {
           return v;
          },
          font : '18px Arial'
         }
        }]
     });
  });