Как динамически добавить вертикальную линию в кендо-диаграмму с помощью обёрток c # mvc?

Question

Я создал диаграмму кендо в своем веб-приложении c # mvc и хотел бы динамически рисовать простую вертикальную линию (например, plotband) при изменении значения ползунка. Функция смены слайдера, а также отрисовка сюжетных полос статически работает, но когда я пытаюсь динамически нарисовать ее на событии изменения ползунка, она ничего не делает.

Диаграмма инициализируется с помощью mvc-wrappers следующим образом:

 @(Html.Kendo().Chart<ViewModel>()
 .Name("stretchAltitudeProfile")
 .Series(series =>
    {
        series.ScatterLine(m => m.xlab, m => m.value).Name("Stretch").Color("#ff1c1c").Markers(markers => markers.Visible(false)).Tooltip(tooltip => tooltip.Visible(true).Format("{1:n0}m @ {0}m"));
    })
    .YAxis(axis => axis
        .Numeric("Altitude Height")
        .Labels(labels => labels.Format("{0} m"))
        .Color("#73c100")
    )
    .XAxis(x => x

            .Numeric()
            .PlotBands(bands => bands.Add().From(300).To(500).Color("#c00"))
            .Title(title => title.Text("Stretch Length m"))
            .Crosshair(c => c.Visible(true))
            .Labels(labels => labels.Format("{0:No}m").Rotation(-45))
    )

Функция смены слайдера в javascript выглядит следующим образом:

function sliderChange(e) {
  var chart = $("#stretchAltitudeProfile").data("kendoChart");
  chart.setOptions({
        xAxis: {
            plotBands: [
                { from: 100, to: 200, color: "red" }
            ]
  }
 chart.refresh();
}

К сожалению, ничего не меняется при вызове этой функции. Как правильно вызывать функцию setOptions диаграммы при использовании оболочек mvc?

Answer 1

Вам просто не хватает скобок / скобок:

chart.setOptions({
        xAxis: {
            plotBands: [
                { from: val, to: val+2, color: "red" }
            ]
        }
})

DEMO

ПРИМЕЧАНИЕ: в демоверсии я также отключаю анимацию, чтобы перерисовка диаграммы происходила быстрее.

transitions: false,