从我的模型类创建剑道图表视图

Question

我是 MVC 框架和 Kendo 的新手，所以你必须忍受我。这是我的图表基类（我使用的 DatedChart 类只是<DateTime, double> 类型的图表：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Project.Models.Charts
{
    public class NewChart<XType, YType> : IMailListener
        where XType:IComparable 
        where YType:IComparable
    {
        public Dictionary<string, DataSeries<XType, YType>> SeriesList { get; protected set;  }
        public string Title { get; set; }
        public string XLabel { get; set; }
        public string YLabel { get; set; }

        public NewChart(string title, string xLabel, string yLabel)
        {
            this.SeriesList = new Dictionary<string, DataSeries<XType, YType>>();
            this.Title = title;
            this.XLabel = xLabel;
            this.YLabel = yLabel;
        }

        public void AddSeries(DataSeries<XType, YType> series)
        {
            this.SeriesList.Add(series.Name, series);
        }

        public virtual void OnUpdate(IEnumerable<MailEntry> mail)
        {
            foreach (var ds in this.SeriesList.Values)
            {
                ds.OnUpdate(mail);
            }
        }
    }
}

这是数据系列的类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Project.Models.Charts
{
    public abstract class DataSeries<XType, YType> : IMailListener
        where XType : IComparable
        where YType : IComparable
    {
        public string Name;
        public List<Pair<XType, YType>> values { get; private set; }

        protected DataSeries(string name)
        {
            this.Name = name;
            this.values = new List<Pair<XType, YType>>();
        }

        public abstract void OnUpdate(IEnumerable<MailEntry> mail);
    }
}

我需要做的是创建一个显示这些图表之一的视图。我已经阅读了很多示例，但我很难看到它们如何应用于我正在尝试做的事情 - 其中很多都掩盖了如何围绕任意模型拟合您的视图。我不需要任何花哨的例子，只需要一些可以告诉我如何将这些图表中的数据转换为 Kendo 的 LineChart 类可以显示该系列的格式的东西。我的观点可能是这样的：

@using DatedChart = Project.Models.Charts.DatedChart
@using DatedSeries = Project.Models.Charts.DataSeries<System.DateTime, double>
@model DatedChart

<div class="nice-module nice-smallchart center">
    // Magic here?
</div>

有什么提示吗？

编辑：

模型说明 我的模型由 Chart 对象组成，其中每个图表都有一个标题、x 轴、y 轴和一组一个或多个数据系列。每个系列都是一组不同的点（即，它将有自己的颜色，如果是折线图，则只有这些点会相互连接）。我将基本 Chart 类参数化，以便 X 和 Y 轴可以具有任何类型，但现在我只是将 DateTime 对象用于 X 类型，将双精度对象用于 y 类型，因此 DatedChart 将具有其数据点的系列是成对的。此图表模型的一个示例是显示四个 Stack Overflow 用户在一个月内的声誉的图表。每个用户都会有他或她自己的一系列点 (x, y)，其中 x 是一天的 DateTime，y 是帖子数。

Answer 1

我不明白你的模型是如何工作的（什么是 DatedChart 等），但我将如何绘制图表：

型号

public class Pair<XType, YType>
{
    public XType X { get; set; }
    public YType Y { get; set; }
}

public class ChartModel<XType, YType>
{
    public List<Pair<XType, YType>> Data { get; set; }
}

控制器动作

public ActionResult Test()
{
    ChartModel<int, int> model = new ChartModel<int, int>();
    model.Data = new List<Pair<int, int>>();

    for (int i = 0; i < 10; i++)
    {
        Pair<int, int> p = new Pair<int, int>();
        p.X = i;
        p.Y = i;
        model.Data.Add(p);
    }

    return View(model);
}

查看

@model ChartModel<int, int> 

 <div id="chart"></div>

<script>
    function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Chart title"
            },
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "line"
            },
            series: [{
                name: "Serie name",
                data: [
                    @foreach (var item in Model.Data)
                    {
                        @item.X.ToString()@:,
                    }
                    ]
                    }],
            valueAxis: {
                labels: {
                    format: "{0}%"
                },
                line: {
                    visible: false
                }
            },
            categoryAxis: {
                categories: [
                    @foreach (var item in Model.Data)
                    {
                        @item.Y@:,
                    }],
                majorGridLines: {
                    visible: true
                }
            },
            tooltip: {
                visible: true,
                format: "{0}%",
                template: "#= series.name #: #= value #"
            }
        });
    }

    $(document).ready(createChart);
</script>