Question

我正在使用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（）。

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

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

                      }

Answer 1

我所知道的最可靠的方法是通过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});
}

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

更改一系列Ext.chart.series.Gauge的colorSet

1 个答案: