0

棒グラフがあり、各棒を異なる色でレンダリングしたい。だから私はそれらを使ってみました、サンプルコードは次のとおりです：

             Ext.define('Ext.chart.theme.FancyTheme',{
extend : 'Ext.chart.theme.Base',

constructor : function(config){
    this.callParent([Ext.apply({
        colors : ['#9CC5C9','#D5544F','#D5544F','#5288DB']
    },config)])
}
});

私のチャートコードは次のとおりです。

        var tc = Ext.create('Ext.chart.Chart',{
        renderTo: Ext.getBody(),
        width: 500,
        height: 300,
        animate : true,
        insetPadding : 20,
        theme: 'FancyTheme',

しかし、すべてのバーの色が同じ色に変わります。つまり、上記の例では '#9cc5c9' になります。しかし、テーマに記載されているように、バーを異なる色でレンダリングしたいです。もう1つ、色をレンダリングするためにrender関数を使用したくない.

つまり、さまざまな色を取得するためのソルンです。誰でも私を助けることができます!!

4

2 に答える 2

1

申し訳ありませんが、レンダラーを使用するのが正しい解決策です。このcolorsプロパティは、同じプロット スペース内の複数の領域など、チャート内の連続するシリーズに使用されます。

レンダラーを使用したくない理由がわかりませんが、必要な作業は次のとおりです。

renderer: function(sprite, record, attr, index, store) {
    var colors = ['#9CC5C9','#D5544F','#D5544F','#5288DB'];

    return Ext.apply(attr, {
        fill: colors[index % colors.length]
    });
}
于 2012-11-29T18:06:25.587 に答える
1

延長もできExt.chart.series.Barます。例えば：

Ext.define('Ext.chart.series.MyBar', {
    extend: 'Ext.chart.series.Bar',
    //type: 'mybar',
    alias: 'series.mybar',

    getPaths: function() {
        this.callParent(arguments);

        var items = this.items, 
            i, iLen = items.length,
            colors = this.colorArrayStyle,
            colorsLength = colors && colors.length || 0;
        for (var i = 0; i < iLen; ++i) {
            items[i].attr.fill = colors[i % colorsLength];
        }
    }
});

次に、シリーズでは、mybarの代わりに使用する必要がありbarます。

于 2012-11-30T08:02:10.073 に答える