從我的模型類創建一個Kendo圖表視圖

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> 

任何提示？

編輯：

模型 我的模型由圖表對象，其中每個圖表具有標題的解釋，x軸，y軸，和一組一個或多個數據系列。每個系列都是一組不同的點（即它將以自己的顏色顯示，如果是折線圖，則只有這些點將相互連接）。我將基類Chart類參數化，以便X軸和Y軸可以有任何類型，但現在我只是使用DateTime對象作爲X類型，雙作爲y類型，因此DatedChart將具有其數據點是成對的。這個圖表模型的一個例子是一個圖表，顯示四個堆棧溢出用戶在一個月內的信譽。每個用戶都有他或她自己的一系列點（x，y），其中x是一天的日期時間，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); 
} 

Vi ew

@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>