Измените минимальные и максимальные значения в Kendo RadialGauge с помощью Ajax

Я хочу иметь возможность изменять минимальное и максимальное значения в Kendo RadialGauge «на лету» с помощью ajax. Нужно ли мне сначала уничтожить датчик и создать новый, или я могу просто изменить текущий датчик и перерисовать его с минимальными, максимальными значениями и значениями указателя?

У меня есть типичный датчик, использующий движок 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");
             }
             )
          )
      )

Используя 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) {
    }
});

Я просмотрел документацию и не увидел, что значения Min и Max можно изменить, однако значение указателя можно изменить через ajax.


jquery asp.net-mvc asp.net-mvc-4 kendo-ui kendo-dataviz
person gardarvalur    schedule 30.12.2013    source источник
comment
вы пробовали код, который вы разместили? вроде должно работать   -  person Lars Höppner    schedule 30.12.2013
comment
Ну, на самом деле @LarsHöppner Мне в конце концов удалось сделать это правильно, как вы предлагаете. Я просто собирался сделать это неправильно. Я написал ответ :)   -  person gardarvalur    schedule 03.01.2014

Ответы (1)


arrow_upward
0
arrow_downward

В конце концов я понял, что все это я делал неправильно. Это собственно то, что мне нужно было сделать:

$.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) {
    }
});
person gardarvalur    schedule 03.01.2014