Extjs Gauge按值更改ColorSet

时间:2015-06-17 09:22:35

标签: extjs gauge

无论如何通过改变价值来改变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']; }    
            }
        }]

    }

渲染器功能不适用于设置colorset。我该如何处理这个问题? 感谢。

1 个答案:

答案 0 :(得分: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 });
            }