ExtJs 6.X;如何使用值更改仪表图的颜色

Question

对于以前版本的 ExtJS，您可以使用以下方法更改仪表的背景颜色：

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 });
        }

有人知道使用 6.X 框架执行此操作的新方法吗？

Answer 1

在版本6.x中，传递给renderer函数的参数是sprite, config, rendererData, index。这些在 sencha docs 中有描述。渲染器可以写成：

   renderer: function(sprite, config, rendererData, index) {
        var value = rendererData.value;
        var color;
        if (value >= 95) {
            color = "#0000ff";
        } else if (value < 85) {
            color = "#00ff00";
        } else {
            color = "#ff0000";
        }
        return {
            fill: color
        };

    }

ExtJs 6.X;如何使用值更改仪表图的颜色

ExtJs 6.X; How do you change the color of a gauge chart using a value

charts

extjs

gauge