添加竖线致ASP.NET MVC Kendo图表散点消失问题求助

问题根源是普通Line系列与Scatter系列的数据结构不兼容：

• Scatter系列基于{x,y}二维坐标对渲染
• 普通Line系列默认按x轴索引匹配y值，和Scatter的坐标模式冲突，导致图表无法正确解析两种数据，最终散点被隐藏

解决方法 #

将普通Line系列替换为ScatterLine系列，它专门用于二维坐标的线绘制，能和Scatter散点系列完美兼容：

修改代码中Series部分的竖线定义：

series.ScatterLine(lineData).Name("Vertical Line"); // 替换原series.Line(...)

修改后的完整代码 #

@{
    Random rand = new Random();
    List<object> scatterData = new List<object>();

    for (int i = 0; i < 100; i++)
    {
        scatterData.Add(new { 
            x = rand.NextDouble() * 5, 
            y = rand.NextDouble() * 5 
        });
    }

    // Vertical line data
    List<object> lineData = new List<object> { new { x = 2.5, y = 0 }, new { x = 2.5, y = 5 } };
}

@(Html.Kendo().Chart()
    .Name("chart")
    .Title("Scatter Plot with PF Curve")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .Series(series =>
    {
        series.Scatter(scatterData).Name("Scatter Data");
        series.ScatterLine(lineData).Name("Vertical Line"); // 此处为修改后的代码
    })
    .XAxis(x => x
        .Numeric()
        .Min(0)
        .Max(5)
        .Title(title => title.Text("Consequences"))
    )
    .YAxis(y => y
        .Numeric()
        .Min(0)
        .Max(5)
        .Title(title => title.Text("Likelihood"))
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0:N2}")
        .Template("#= series.name #: x: #= value.x #, y: #= value.y #")
    )
)

额外优化（可选） #

如果需要自定义竖线样式，可在ScatterLine后链式调用配置方法，比如设置线条颜色、宽度：

series.ScatterLine(lineData)
      .Name("Vertical Line")
      .Color("#ff0000")
      .Width(2);

内容的提问来源于stack exchange，提问作者taylorswiftfan