Question

每当数据发生变化时，我想实时动画我的kendoUI量表。我目前可以通过直接设置仪表指针的值并刷新来完成此操作，但是当我这样做时，它将直接跳转到新值而不是优雅地动画到它。如何添加动画，就像Gauge控件首次启动时那样？

Answer 1

您无需刷新它，只需使用value设置新值即可更新并设置动画。

示例：定义了我使用Kendo数字文本框装饰的HTML input。每次更新数值时，径向和线性测量仪都会更新。

HTML code：

<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

中的示例

Kendo UI计量动画

1 个答案: