Erstellen einer Kendo-Diagrammansicht von meiner Modellklasse

Question

Ich bin neu im MVC-Framework und Kendo, also musst du mit mir umgehen. Hier ist meine Grafik Basisklasse (die DatedChart Klasse Ich verwende ist nur ein Diagramm vom Typ <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); 
      } 
     } 
    } 
} 

Und hier ist die Klasse für die Datenreihe:

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

Was ich tun muss, ist Ich habe viele Beispiele gelesen, aber es ist schwer für mich, zu sehen, wie sie auf das angewendet werden, was ich versuche zu tun - viele von ihnen beschönigen, wie man sie anpasst Sehen Sie sich ein beliebiges Modell an Ich brauche für ein Beispiel nichts Besonderes, nur etwas, das mir zeigt, wie man die Daten aus einem dieser Diagramme in ein Format mit Kendos LineChart bringt Klasse kann die Serie anzeigen. Meine Ansicht könnte etwa so aussehen:

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

Hinweise?

EDIT:

Erläuterung des Modells My Modell der Diagrammobjekte besteht, wobei jedes Diagramm einen Titel hat, x-Achse, y-Achse, und ein Satz von einem oder mehreren Datenreihe. Jede Serie ist eine andere Menge von Punkten (d. H. Sie wird in ihrer eigenen Farbe sein, und wenn es ein Liniendiagramm ist, werden nur diese Punkte miteinander verbunden). Ich habe die Basis-Chart-Klasse parametrisiert, so dass die X- und Y-Achsen einen beliebigen Typ haben können, aber für den Moment verwende ich nur DateTime-Objekte für den X-Typ und doppelt für den Y-Typ, daher das DatedChart, das Reihen mit Datenpunkten hat sind Paare von. Ein Beispiel für dieses Diagrammmodell wäre ein Diagramm, das die Reputation von vier Stack Overflow-Benutzern über einen Zeitraum von einem Monat zeigt. Jeder Benutzer hat seine eigene Reihe von Punkten (x, y), wobei x die DateTime eines Tages ist und y eine Zählung von o-Posts ist.

Answer 1

ich nicht bekommen, wie Ihr Modell funktioniert (Was DatedChart ist etc.), aber hier ist, wie würde ich Diagramm zeichnen:

Modell

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 Aktion

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>