Kendo UI量表動畫

Question

無論何時數據發生變化，我都會實時動畫我的kendoUI量表。我現在可以通過直接設置儀表指針的值並刷新來做到這一點，但是當我這樣做時，它會直接跳到新值並且不會正確地動畫。如何添加動畫，就像Gauge控件在第一次啓動時所做的那樣？

Answer 1

你不需要刷新它，只需使用value設置新值，它就會被更新並生成動畫。

示例：定義一個HTML input，我使用Kendo Numeric Text Box進行修飾。每次我更新數值時，徑向和線性量表都會更新。

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