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() を明示的に呼び出していませんが。

イベント内のゲージ チャートの colorSet を変更するためのベスト プラクティスは何ですか? ゲージの値は変化する可能性があり、変化した場合はその色を更新する必要があります (16 進コードは単なるテスト値です)。

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

実際のcolorSetを設定する別の方法があるかどうかはわかりませんが、基本的にはそれを実行します。次に、チャートを再描画するだけで、色を変更する必要があります。

于 2012-08-23T17:27:21.083 に答える