Extjs Gauge 按值更改 ColorSet

Question

有没有办法通过更改值来更改 extjs 仪表图表的颜色集？

        var gauge = { 
        xtype: 'chart',
        style: 'background:#fff',
        animate: true,
        store: GaugeStore,
        insetPadding: 25,
        axes: [{
            title: 'Performans (%)',
            type: 'gauge',
            position: 'gauge',
            minimum: 0,
            maximum: 100,
            steps: 10,
            margin: 4

        }],
        series: [{
            type: 'gauge',
            field: 'percentagesla',
            donut: 40,
            colorSet:['',''],
            renderer: function (sprite, record, attr, index, store)
            {
                var value = record.get("percentagesla"), color;
                if (value >= 95) { this.colorSet = ['#fff000','ddd']; }
                else if (value < 85) { this.colorSet = ['#ffcc00', 'ddd']; }
                else { this.colorSet = ['#ffaa00', 'ddd']; }    
            }
        }]

    }

渲染器功能不适用于设置颜色集。我该如何处理这个问题？谢谢

Answer 1

使用这个

renderer: function (sprite, record, attr, index, store) {
                if (attr.fill == this.colorSet[1]) return Ext.apply(attr, { fill: attr.fill });
                var value = record.get("SLA"),
                    color;
                if (value >= 95) {
                    color = "#0000ff";
                } else if (value < 85) {
                    color = "#00ff00";
                } else {
                    color = "#ff0000";
                }
                return Ext.apply(attr, { fill: color });
            }

Extjs Gauge 按值更改 ColorSet

Extjs Gauge Change ColorSet by value

extjs

gauge