如何将自定义颜色添加到extjs条形图

我想使用extjs条形图将自定义颜色和其他样式添加到条形图中，我期望在插件属性中进行样式的处理。 这里是我的代码如何将自定义颜色添加到extjs条形图

Ext.require([ 
    'Ext.chart.Chart' 
]); 

Ext.define('CricketScore', { 
    extend: 'Ext.data.Model', 
    fields: ['month', 'data1' ] 
}); 

var store = Ext.create('Ext.data.Store', { 
    model: 'CricketScore', 
      data: [ 
       { month: 'Jan', data1: 20 }, 
       { month: 'Feb', data1: 20 }, 
       { month: 'Mar', data1: 19 }, 
       { month: 'Apr', data1: 18 }, 
       { month: 'May', data1: 18 }, 
       { month: 'Jun', data1: 17 }, 
       { month: 'Jul', data1: 16 }, 
       { month: 'Aug', data1: 16 }, 
       { month: 'Sep', data1: 16 }, 
       { month: 'Oct', data1: 16 }, 
       { month: 'Nov', data1: 15 }, 
       { month: 'Dec', data1: 15 } 
      ] 
}); 

Ext.create('Ext.chart.Chart', { 
    //renderTo: Ext.getBody(), 
    renderTo: "demoChart", 
    width: 400, 
    height: 300, 
    store: store, 
    animate: true, 
    axes: [ 
     { 
       type: 'Numeric', 
       position: 'bottom', 
       fields: ['data1'], 
       minimum: 0, 
       maximum:100 

      }, { 
       type: 'Category', 
       position: 'top', 
       fields: ['month'], 
      } 
    ], 

     series: [ 
     { 
       type: 'column', 
       axis: 'left', 
       xField: 'month', 
       yField: 'data1', 
       style :{ 
        fill : '#343234', 
        'stroke-width': 30 
       }, 
       highlight: { 
        fill: '#cd1c5f', 
        'stroke-width': 10, 
        stroke: '#ed2b74' 
       }, 
       tips: { 
        trackMouse: true, 
        style: 'background: #FFF', 
        height: 20, 
        renderer: function(storeItem, item) { 
         this.setTitle(storeItem.get('month') + ': ' + storeItem.get('data1') + '%'); 
        } 
       } 
      } 
    ] 
});

这里是Jisfiddle

http://jsfiddle.net/djaydxnd/54/

来源

2017-06-01 Divya Sharma

你正在使用哪个ExtJS版本？ –

在你拨弄你正在使用ExtJS 4.2然后我假设你正在使用4.2 verison。为了让颜色你必须写renderer和getLegendColor功能series对象

getLegendColor: function(index) { 
       return 'rgb(255,203,36)'; 
       }, 
renderer: function(sprite, record, attr, index, store) { 
       return Ext.apply(attr, { 
       fill: 'rgb(255,203,36)' 
       }); 
       }

希望这有助于。

在ExtJA 6您可以直接使用colors属性series对象。

来源

2017-06-01 10:15:52

它的作品完美，但你可以区分“getLegendColor：function（）”和渲染器：函数（...），因为我想知道使用这两个函数或任何一个？如果您有任何示例链接或此文档 –

如果您在字符中使用图例，如右边的小方块那么您必须编写该代码。 http://docs.sencha.com/extjs/4.2.6/#!/example/charts/Pie.html I.如果您不使用它，则不需要编写该函数。 –

我还有一个担心，我需要将图像（https://i.stack.imgur.com/VO56l.png）中显示的数据值作为底部轴，但它的值范围为0,10 ，15,20等 –

如何将自定义颜色添加到extjs条形图

回答

相关问题