Tworzenie widoku wykresu Kendo z mojej klasy modelu

Question

Jestem nowy zarówno w dziedzinie MVC, jak i Kendo, więc będziesz musiał wytrzymać ze mną. Oto moja klasa bazowa wykres (klasa DatedChart używam jest tylko wykres typu <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); 
      } 
     } 
    } 
} 

A oto klasa dla serii danych:

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); 
    } 
} 

Co muszę zrobić, to aby utworzyć widok, który wyświetli jeden z tych wykresów. Czytałem wiele przykładów, ale trudno mi zobaczyć, jak odnoszą się one do tego, co próbuję zrobić - wiele z nich glosuje, jak dopasować obejrzyj dowolny model, nie potrzebuję niczego na przykład, po prostu coś, co pokaże mi, jak przenieść dane z jednego z tych wykresów do formatu, w którym Kendo's LineChart klasa może wyświetlać serię. Mój widok może wyglądać mniej więcej tak:

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

Jakieś wskazówki?

Edycja:

Objaśnienie modelu My wzór składa się z przedmiotów na wykresie, gdzie każdy wykres ma tytuł, wokół osi x, osi y, a zestaw jednego lub więcej serii danych. Każda seria jest innym zbiorem punktów (to jest w swoim własnym kolorze, a jeśli jest to wykres liniowy, tylko te punkty będą ze sobą połączone). Zrobiłem sparametryzowaną klasę podstawową, aby osie X i Y mogły mieć dowolny typ, ale na razie używam tylko obiektów DateTime dla typu X i podwójnych dla typu y, stąd DatedChart, które będą miały serię, których punkty danych są parami. Przykładem tego modelu wykresu może być wykres przedstawiający reputację czterech użytkowników przepełnienia stosu w okresie jednego miesiąca. Każdy użytkownik miałby swoją serię punktów (x, y), gdzie x jest DateTime dnia, a y jest liczbą postów.

Answer 1

nie dostać, jak dany model działa (co jest DatedChart itd.), Ale tutaj jest jak chciałbym zwrócić wykresu:

modelu

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; } 
} 

Controller Akcja

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>