1

朝

以下のコードを使用して、Sencha でチャートを作成しています

正常に動作しますが、すべての列が異なるランダムな色です。その場合、すべてを同じ色にする必要があります。

fill: 'blue'and fill: '#000080'and style: { fill: 'blue' } in series in を使ってみましたが、そうではありませんでした

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

ここにフィドルがあります

4

1 に答える 1

6

アップデート

解決策 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'
       });
    }
}]

このフィドルを参照してください

解決策 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

このフィドルを参照してください

于 2013-08-28T08:51:37.023 に答える