条形图的ExtJs 4色主题

ExtJs 4 color theme for bar chart

本文关键字：4色 ExtJs 条形图      更新时间：2023-09-26

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

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

// 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 ...

我找到了一个解决方案。

http://www.sencha.com/learn/drawing-and-charting/

把这个放在你的视野中：

var colors = ['#ff0000','#FF9900','#009933',       '#888',              '#999']; 
var baseColor = '#eee'; 
Ext.define('Ext.chart.theme.Fancy', {
    extend: 'Ext.chart.theme.Base', 
    constructor: function(config) {
        this.callParent([Ext.apply({           
            colors: colors
        }, config)]);
    }
});

然后调用您创建的主题：

Ext.define('MyAPP.view.Graph.GrafPlazos',{
    extend: 'Ext.chart.Chart',
    alias : 'widget.plazocibar',
    id: 'chart_plazosci',
    xtype: 'chart',
    style: 'background:#fff',
    animate: true,
    shadow: true,
    store: 'Plazos.GPlazosci',
    theme: 'Fancy',

Chart使用Theme作为混合

因此，您可以直接使用名为themeAttribute的主题属性。

例如，如果您在柱形图/堆叠柱形图的构造函数中，想要更改柱的颜色，您可以指定

this.themeAttributes.colors=['#F2C72B'，'#a5c249'，'#E88712'，'#9D5FFA']；

相关文章：