Question

上午

我正在使用以下代码在Sencha中创建图表

它工作正常，但是，所有列都是不同的随机颜色。然后我需要所有颜色相同。

我尝试在系列中使用fill: 'blue'和fill: '#000080'以及style: { fill: 'blue' }，但没有

var days30fields = new Array('name');
var days30fieldsd = new Array();
var days30fieldValues = new Object();
days30fieldValues['name'] = 'Last 30 days';
for(var xd = 1; xd<31; xd++){
    days30fields.push('day'+xd);
    days30fieldsd.push('day'+xd);
    days30fieldValues['day'+xd] = Math.floor((Math.random()*100)+1);
}

var chartb = new Ext.chart.Chart({
          renderTo : Ext.getBody(), 
          xtype: 'chart',
          itemId:'demochart',
          title: 'Sales Figures',
          animate: true,
            width : '80%',
            height : '70%',
            margin: '150 auto',
            store: {
                fields: days30fields,
                data:
                    //'name': 'Last 30 Days',
                    /*'day1': 10,
                    'day2': 12,
                    'day3': 14,
                    'day4': 8,
                    'day5': 13*/
                    days30fieldValues

            },
            axes: [{
                type: 'numeric',
                position: 'left',
                minimum: 0,
                renderer: function (value) {
                    value = value / 1000000;
                    return value.toFixed(1);
                },
                title:  'Number of orders',
                fields: days30fieldsd
            }, {
                type: 'category',
                position: 'bottom',
                title: 'Days',
                fields: 'name',

            }],
            series: [{
                highlight: true,
                type: 'column',
                stacked: true,
                xField: 'name',
                yField: days30fieldsd,

            }]
        });

在视图配置中：

items: [
    {
                xtype : 'container',
                flex: 1,
                items: [chartb]  
          },

这是fiddle

Answer 1

<强>更新

解决方案1 

series: [{
    highlight: true,
    type: 'column',           
    //stacked: true,
    xField: 'name',
    yField: days30fieldsd,
    renderer: function(sprite, record, attr, index, store){
       return Ext.apply(attr, {
          fill: 'red'
       });
    }
}]

请参阅this小提琴

解决方案2 （适用于多种颜色）

使用Ext.chart.theme.Base为您的图表创建新主题并应用它。

Ext.define('Ext.chart.theme.ColumnTheme', {
    extend: 'Ext.chart.theme.Base',
    constructor: function(config) {
        this.callParent([Ext.apply({ 

           colors: ['red','green']

        }, config)]);
    }
});

在图表中使用主题配置应用ColumnTheme

    var chartb = new Ext.chart.Chart({
             renderTo : Ext.getBody(), 
             theme:'ColumnTheme',    
              xtype: 'chart',
              itemId:'demochart',
               .... same code

请参阅此fiddle

如何更改sencha图表列的颜色（颜色）

1 个答案: