asp.net-mvc - 剑道 UI 条形图中的动态系列

Question

我已经在这个问题上花费了几个小时，但似乎无法弄清楚如何解决它。

我正在尝试创建这样的堆积条形图:

http://demos.kendoui.com/dataviz/bar-charts/stacked-bar.html

我正在使用 ASP.NET MVC (Razor)。

下面是一些示例代码:

@(Html.Kendo().Chart()
    .Name("chart")
    .Title("chart")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .SeriesDefaults(seriesDefaults =>
        seriesDefaults.Bar().Stack(true)
    )
    .Series(series =>
    {

        series.Bar(new double[] { 4 });
        series.Bar(new double[] { 2 });
        series.Bar(new double[] { 7 });

    })
    .CategoryAxis(axis => axis
        .Categories("Machine")
        .MajorGridLines(lines => lines.Visible(false))
    )
    .ValueAxis(axis => axis
        .Numeric()
        .Labels(labels => labels.Format("{0}"))
        .Max(24)
        .Line(line => line.Visible(false))
        .MajorGridLines(lines => lines.Visible(true))
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= series.name #: #= value #")
    )
)

现在这是我面临的问题。这行代码:

series.Bar(new double[] { 4 });

将值 4 添加到我的图表中。问题是，在我编写代码的那一刻，我不知道会有多少个系列。这将由数据库中的数据决定。例如，如果有 5 个记录，我需要添加 5 个系列，依此类推。

你知道如何添加这些系列吗？

干杯!

Answer 1

对于其他有类似问题的人，我想我找到了一个解决方法。

@{
List<List<int>> myList = new List<List<int>>();
myList.Add(new List<int> { 7 });
myList.Add(new List<int> { 2 });
myList.Add(new List<int> { 3 });
myList.Add(new List<int> { 4 });
}        

...

.Series(series =>
        {
            for (int i = 0; i < 4;i++ )
            {
                series.Bar(myList[i]);
            }

        })
...

由于 Kendo Ui 图表想要获取列表，因此我必须创建列表列表。比使用 for 循环迭代所需的数据。通过这种方式，数据只能堆叠在一个类别中。

它允许系列的数量是一个变量(通过模型传递给 View )