Asp.net mvc 使用Ajax更改剑道半径中的最小值和最大值
我希望能够使用ajax“动态”更改剑道半径中的最小值和最大值。我是否需要先销毁仪表并创建一个新仪表,或者我是否可以更改当前仪表并使用最小值、最大值和指针值重新绘制它 我有一个使用剃须刀引擎的典型仪表:Asp.net mvc 使用Ajax更改剑道半径中的最小值和最大值,asp.net-mvc,asp.net-mvc-4,jquery,kendo-ui,kendo-dataviz,Asp.net Mvc,Asp.net Mvc 4,Jquery,Kendo Ui,Kendo Dataviz,我希望能够使用ajax“动态”更改剑道半径中的最小值和最大值。我是否需要先销毁仪表并创建一个新仪表,或者我是否可以更改当前仪表并使用最小值、最大值和指针值重新绘制它 我有一个使用剃须刀引擎的典型仪表: @(Html.Kendo().RadialGauge() .Name("TotalCostGauge") .Pointer(pointer => pointer.Value(0)) .Scale(scale => scale
@(Html.Kendo().RadialGauge()
.Name("TotalCostGauge")
.Pointer(pointer => pointer.Value(0))
.Scale(scale => scale
.MinorUnit(5)
.StartAngle(-50)
.EndAngle(230)
.Max(100)
.Labels(labels => labels.Position(GaugeRadialScaleLabelsPosition.Inside))
.Ranges(ranges =>
{
ranges.Add().From(180).To(180).Color("#c20000");
}
)
)
)
使用ajax,我希望能够更新这些值:
$.ajax({
type: "GET",
dataType: "json",
url: 'Controller/GetStuff/',
success: function (data) {
var totalCostGauge = $("#TotalCostGauge").data("kendoRadialGauge");
var totCostOptions = totalCostGauge.options;
//TODO: I want to be able to do something like this
totCostOptions.scale.max = data.Max;
totalCostGauge.value(data.TotalCost);
totalCostGauge.redraw();
},
error: function (error) {
}
});
我查看了,看不到最小值和最大值可以更改,但是指针值可以通过ajax更改。最终我发现我在这方面完全错了。这实际上是我需要做的:
$.ajax({
type: "GET",
dataType: "json",
url: 'Controller/GetStuff/',
success: function (data) {
$("#TotalCostGauge").kendoRadialGauge({
scale: {
max: data.Max, // This is actually what I should have done :)
startAngle: -50,
endAngle: 230,
labels: {
format: "C0",
font: "8px Arial,Helvetica,sans-serif"
},
ranges: [{
from: 0,
to: 0,
color: "green"
}]
}
});
var totalCostGauge = $("#TotalCostGauge").data("kendoRadialGauge");
totalCostGauge.value(data.Cost);
totalCostGauge.redraw();
},
error: function (error) {
}
});
你试过你发布的代码了吗?看起来这应该很有效,实际上@LarsHöppner我最终成功地做到了这一点,正如你所建议的那样。我只是做错了。我贴了一个答案:)