Question

我是MVC框架和剑道的新手，所以你必须忍受我。这是我的图表基类（我正在使用的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>

任何提示？

编辑：

模型说明 我的模型由图表对象组成，其中每个图表都有一个标题，x轴，y轴和一组一个或多个数据系列。每个系列都是一组不同的点（即它将是自己的颜色，如果它是折线图，那么只有那些点将相互连接）。我对基础Chart类进行了参数化，以便X和Y轴可以有任何类型，但是现在我只使用DateTime对象作为X类型并且为y类型加倍，因此DatedChart将具有其数据点的系列是成对的。此图表模型的一个示例是显示四个Stack Overflow用户在一个月内的声誉的图表。每个用户都有他或她自己的一系列点（x，y），其中x是一天的DateTime，y是一个o的帖子。

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>

从我的模型类创建一个Kendo图表视图

1 个答案: