データが変更されるたびに、kendoUI ゲージをリアルタイムでアニメーション化したいと考えています。現在、ゲージポインターの値を直接設定して更新することでこれを行うことができますが、そうすると、新しい値に直接ジャンプし、適切にアニメーション化されません。Gauge コントロールが最初に起動するときのように、アニメーションを追加するにはどうすればよいですか?
質問する
1295 次
1 に答える
3
を使用して新しい値を設定するだけで、value
更新されてアニメーション化されます。
例: input
Kendo Numeric Text Box で装飾する HTML を定義しました。値を更新するたびに、ラジアル ゲージとリニア ゲージの両方が更新されます。
HTML コード:
<div>
<input id="gauge-value" value="65">
</div>
<div id="gauge-container">
<div id="gaugeR"></div>
<div id="gaugeL"></div>
</div>
JavaScript (ゲージの初期化):
var gaugeR = $("#gaugeR").kendoRadialGauge({
pointer: {
value: value.value()
},
scale : {
minorUnit : 5,
startAngle: -30,
endAngle : 210,
max : 180
}
}).data("kendoRadialGauge");
var gaugeL = $("#gaugeL").kendoLinearGauge({
pointer: {
value: value.value(),
shape: "arrow"
},
scale : {
majorUnit: 20,
minorUnit: 5,
max : 180
}
}).data("kendoLinearGauge");
そして、次NumericTextBox
を更新する変更イベント ハンドラーを使用しますgauges
。
var value = $("#gauge-value").kendoNumericTextBox({
min : 0,
max : 180,
change: function () {
var v = $("#gauge-value").val();
gaugeR.value(v);
gaugeL.value(v);
}
}).data("kendoNumericTextBox");
JSFiddleでの例
于 2013-05-01T22:48:43.523 に答える