使用Ajax更改Kendo RadialGauge中的Min和Max值

I want to be able to change the min and max values in the Kendo RadialGauge "on the fly" with ajax. Do I need to destroy the gauge first and create a new one, or could I possibly just change current gauge and redraw it with min, max, and pointer values?

我希望能够使用ajax“动态”更改Kendo RadialGauge中的最小值和最大值。我是否需要首先销毁仪表并创建一个新仪表,或者我是否可以更改当前仪表并使用最小值,最大值和指针值重新绘制它?

I have a typical gauge using Razor engine:

我有一个使用Razor引擎的典型仪表:

    @(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");
             }
             )
          )
      )

Using ajax I want to be able to update those values:

使用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) {
    }
});

I went through the documentation and could not see that the Min and Max values could be changed, however the pointer value can be changed via ajax.

我浏览了文档,看不到Min和Max值可以更改,但是指针值可以通过ajax更改。

1 个解决方案

#1

Eventually I found out that I was going at this all wrong. This is actually what I needed to do:

最终我发现自己错了。这实际上是我需要做的事情:

$.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) {
    }
});