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

Question

我正在尝试使用 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/

Answer 1

在您的 fiddle 中，您使用的是 ExtJS 4.2 那么我假设您使用的是 4.2 verison。要赋予颜色，您必须在 series 对象中编写 renderer 和 getLegendColor 函数

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 中，您可以直接使用 series 对象的 colors 属性。