如何使用 c# mvc 包装器向 kendo-chart 动态添加垂直线？答案

【问题标题】：How to dynamically add vertical line to kendo-chart with c# mvc wrappers?如何使用 c# mvc 包装器向 kendo-chart 动态添加垂直线？
【发布时间】：2019-06-01 22:56:48
【问题描述】：

我在我的 c# mvc Web 应用程序中创建了一个剑道图表，并希望在滑块值发生变化时动态地绘制一条简单的垂直线（例如 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();
}

不幸的是，调用此函数时没有任何变化。使用 mvc 包装器时调用图表的 setOptions 函数的正确方法是什么？

【问题讨论】：

标签： javascript c# html asp.net-mvc kendo-ui

【解决方案1】：

您只是缺少一些括号/大括号：

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

DEMO

注意：在演示中，我还关闭了动画，以便更快地重绘图表。

transitions: false,

【讨论】：

我已经尝试过这种方式，但似乎问题是在使用 mvc-wrappers 而不是像您那样使用普通的 html-placeholder + javascript 时，我无法更改任何图表属性。跨度>
@mhfmn，我自己没有使用过 mvc 包装器。希望其他人会加入......