Question

我在使用＃006AB8的纯色着色ExtJS中的条形图时遇到了麻烦。

通过查看文档，我有一些工作，没有颜色。

以下是我的系列代码：

            series: [{
            type: 'bar',
            axis: 'bottom',
            highlight: true,
            tips: {
              trackMouse: true,
              width: 140,
              height: 28,
              renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('callcentre') + ': ' + storeItem.get('calls'));
              }
            },
            label: {
              display: 'insideEnd',
                field: 'calls',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'horizontal',
                color: '#333',
              'text-anchor': 'middle'
            },
            xField: 'callcentre',
            yField: ['calls'],
            renderer: function() {
                    return Ext.apply({
                            fill: '#006AB8'
                    });
            }
        }]

这是渲染器坏了，我无法正常工作如何正确格式化。

谢谢，

路。

Answer 1

我是这样做的。

renderer: function(sprite, record, attr, index, store) {
    var value = 0;
    var color = ['rgb(147, 169, 208)'][value];
    return Ext.apply(attr, {
        fill: color
    });
}

如果您想要更多颜色选项，请按以下步骤操作：

var value = 3; <-- the value determines the color array (index starts 0).
var color = [
    'rgb(114, 19, 15)', 
    'rgb(92, 48, 71)', 
    'rgb(81, 114, 179)', 
    'rgb(196, 185, 183)', 
    'rgb(13, 111, 62)',
    'rgb(158, 129, 133)',
    'rgb(50, 107, 126)'][value];
    return Ext.apply(attr, {
    fill: color
});

Answer 2

您可以尝试以下代码：

    renderer: function(sprite, record, attr, index, store) {
        return Ext.apply(attr, {
            fill: '#006AB8'
        });
    }

Answer 3

我希望我能帮忙

我这样给我的酒吧着色了：

var colors = ['rgb(255, 255, 0)',
                  'rgb(125, 255, 0)',
                  'rgb(0, 255, 0)',
                  'rgb(0, 255, 125)',
                  'rgb(0, 0, 255)'];

Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
    constructor: function (config) {
        Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
            colors: colors
        }, config));
    }
});

在此之后，您将主题“浏览器：渐变”作为属性传递给您的图表：

var chart = Ext.create('Ext.chart.Chart', {
    width: 500,
    height: 200,
    theme: 'Browser:gradients',
    ...});

ExtJS v4.0 - 带有自定义纯色条形图的条形图

3 个答案: