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