Creazione di una vista del grafico Kendo dalla mia classe di modello

Question

Sono nuovo sia per il framework MVC sia per il Kendo, quindi dovrete sopportarlo. Ecco la mia classe di base grafico (la classe DatedChart sto usando è solo un grafico di tipo <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); 
      } 
     } 
    } 
} 

Ed ecco la classe per la serie di dati:

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

Che cosa devo fare è per creare una vista che visualizzerà uno di questi grafici. Ho letto molti esempi, ma è difficile per me vedere come si applicano a ciò che sto cercando di fare - molti di essi spiegano come adattarsi al tuo vista intorno a un modello arbitrario. Non ho bisogno di niente di fantasia per un esempio, solo qualcosa che mi mostrerà come ottenere i dati da uno di questi grafici in un formato in cui il LineChart di Kendo la classe può visualizzare la serie. La mia vista potrebbe essere simile a questa:

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

Eventuali suggerimenti?

EDIT:

Spiegazione del modello mio modello è costituito da oggetti Grafico, dove ogni grafico ha un titolo, asse x, asse y, e un insieme di una o più serie di dati. Ogni serie è un diverso insieme di punti (vale a dire sarà nel suo colore e, se si tratta di un grafico a linee, solo quei punti saranno collegati tra loro). Ho reso la classe Chart base parametrizzata in modo che gli assi X e Y possano avere qualsiasi tipo, ma per ora sto solo usando gli oggetti DateTime per il tipo X e raddoppiamo per il tipo y, quindi il DatedChart che avrà serie i cui punti dati sono coppie di Un esempio di questo modello di grafico sarebbe un grafico che mostra la reputazione di quattro utenti di Stack Overflow nell'arco di un mese. Ogni utente dovrebbe avere la propria serie di punti (x, y), dove x è il DateTime di un giorno, e y è un conteggio o post.

Answer 1

Non ho ricevuto come funziona il vostro modello (Qual è DatedChart ecc), ma ecco come vorrei richiamare grafico:

Modello

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

azione controller

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>