添加垂直线删除了所有散点图点

Question

采用ASP.NET MVC Kendo框架，无需线

series.Line(lineData).Name("Vertical 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.Line(lineData).Name("Vertical Line"); // Add this 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 #")
    )
)

Answer 1

这不起作用，因为图表的

series.Line

方法创建了一个新的线系列，当您将其添加到现有系列集合时，它会覆盖现有的

Scatter

系列（正如您所发现的）。

要保留垂直线数据并保留散点数据，您应该创建一个单独的系列并将其添加到图表中。例如

@{
    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(series =>
    {
        // add the line series
        series.Line(lineData)
             .Name("Vertical Line")
             .Markers(markers => markers.Visible(false));
    })
    .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 #")
    )
)