javascript - 用于条形图的 ExtJs 4 颜色主题

Question

我正在使用 extJs 4 绘制类似于此的图表 http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/charts/BarRenderer.html .但是，我将为每个条形图设置 2 个或更多段，并且可以有任意数量的条形图。我想为所有条形图使用完全不同的颜色。此外，我想要该条的各个部分的当前条颜色的不同阴影。相同的颜色代码需要反射(reflect)在图例中。 非常感谢您的帮助。

Answer 1

您必须创建一个自定义图表主题来指定颜色。我曾经为折线图做过一次。您可能需要对其进行一些调整以使其适用于条形图，如果是这样，您可以在 %extjs-root%/src/chart/theme/Base.js 中找到所有可能的选项。这是我的折线图:

// CUSTOM CHART THEME
Ext.chart.theme.myTheme = Ext.extend(Ext.chart.theme.Base, {
    constructor: function(config) {
        Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({      
            colors: ['rgb(0, 0, 0)', 
                     'rgb(0,0,255)', 
                     'rgb(255,0,0)', 
                     'rgb(0,128,0)', 
                     'rgb(128,0,128)'
            ],                           
        }, config));
    }
});

确保在条形图配置中包含主题。

xtype: 'chart',
style: 'background:#fff',
animate: true,
store: myChartStore,
theme: 'Events',
legend: {
    position: 'right'
},
// other configs ...