1

我正在使用 extjs，但我对这个框架没有丰富的经验。我有一个仪表，我需要在初始化后更改它的颜色。在一个完美的世界里，我会改变这个使用

this.myGauge.series.colorSet = ['#fff', '#ddd'];

但是在这种情况下 colorSet 是未定义的。

创建一个新系列并将其分配给图表，如下所示：

this.myGauge.series.add(new Ext.chart.series.Series([{
        type: 'gauge',
        field: 'value',
        donut: 30,
        colorSet: ['#aaa', '#ddd']
     }]));

这在尝试重绘图表时会引发错误

TypeError: series.drawSeries is not a function

即使我没有在任何地方明确调用 drawSeries() 。

在事件中修改仪表图的颜色集的最佳做法是什么？仪表的值可以改变，当它改变时，我需要更新它的颜色（十六进制代码只是测试值）。

  if (gaugeValue >= 95) {

     //Green         
     this.typicalGauge.series.colorSet = ['#fff', '#ddd'];

  } else if (gaugeValue < 95 && gaugeValue >= 85) {

     //Yellow
     this.typicalGauge.series.colorSet = ['#ccc', '#ddd'];

  } else if (gaugeValue < 85) {

     //Red
     this.typicalGauge.series.colorSet = ['#aaa', '#ddd'];

  }

感谢 Eric Cook，我走上了正确的道路。更改 colorSet 中的第一项需要做的是利用传递给渲染器函数的索引变量，如下所示：

renderer: function (sprite, record, attr, index, store) {

                         var value = record.get("value");

                         var color = null;
                         if (value >= 95) {
                            color = "#1BE01B";
                         } else if (value < 85) {
                            color = "#DEE817";
                         } else {
                            color = "#E81717";
                         }
                         if (index == 0) {

                            return Ext.apply(attr, { fill: color });
                         } else {
                            return attr;
                         }

                      }
4

1 回答 1

2

我知道的最可靠的方法是通过renderer函数。在我看来，它没有很好的记录，所以它看起来像这样：

renderer: function(sprite, record, attr, index, store){
    // You'll probably want to set a breakpoint here just to see what values
    // you have to work with. I'm not completely sure myself.

    return Ext.apply(attr, {
        fill: "#f00" /* This is probably the property you're looking for */
    });
}

在我看来，Ext JS 图表仍然有很多错误，所以如果它不能立即工作，请不要感到惊讶。但这应该有希望让你开始。

编辑：每次图表重绘时都会调用渲染器。您可以像这样从记录中获取值：

renderer: function(sprite, record, attr, index, store){
    var value = record.get("value"),
        color;
    if (value >= 95) {
        color = "#fff";
    } else if(value < 85) {
        color = "#aaa";
    } else {
        color = "#ccc";
    }
    return Ext.apply(attr, {fill: color});
}

我不确定是否有不同的方法来设置实际的颜色集，但这基本上就是你要做的。然后你只需重新绘制图表，你的颜色应该会改变。

于 2012-08-23T17:27:21.083 回答