剑道UI仪表盘动画

Question

每当数据发生变化时，我都希望实时动态显示我的kendoUI仪表盘。我目前可以通过直接设置仪表指针的值并刷新来实现这一点，但当我这样做时，它将直接跳转到新值，而不是优雅地动画到新值。如何添加动画，就像仪表控件第一次启动时所做的那样？

Answer 1

你不需要刷新它，只需使用value设置新值，它就会得到更新和动画。

示例:定义了一个用Kendo Numeric文本框装饰的超文本标记语言input。每次我更新该值时，径向和线性量规都会更新。

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

和带有更新gauges的change事件处理程序的NumericTextBox

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中的示例