Tạo chế độ xem biểu đồ Kendo từ lớp mô hình của tôi

Question

Tôi mới sử dụng cả khung MVC và Kendo, vì vậy bạn sẽ phải chịu đựng với tôi. Dưới đây là lớp cơ sở biểu đồ của tôi (lớp DatedChart Tôi đang sử dụng chỉ là một biểu đồ của kiểu <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); 
      } 
     } 
    } 
} 

Và đây là lớp học cho các loạt dữ liệu:

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

Những gì tôi cần làm là Tôi đã đọc rất nhiều ví dụ, nhưng thật khó cho tôi để xem chúng áp dụng như thế nào với những gì tôi đang cố gắng làm - rất nhiều trong số đó là cách để phù hợp với Tôi không cần bất cứ điều gì ưa thích cho một ví dụ, chỉ cần một cái gì đó sẽ chỉ cho tôi làm thế nào để có được dữ liệu từ một trong những bảng xếp hạng vào một định dạng mà Linechart Kendo của lớp có thể hiển thị chuỗi. Chế độ xem của tôi có thể trông giống như sau:

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

Bất kỳ gợi ý nào?

EDIT:

Giải thích về mô hình mô hình của tôi bao gồm các đối tượng Chart, trong đó mỗi biểu đồ có một tiêu đề, x-trục, trục y, và một tập hợp của một hoặc nhiều loạt dữ liệu. Mỗi chuỗi là một tập hợp các điểm khác nhau (nghĩa là nó sẽ có màu riêng và nếu đó là biểu đồ dạng đường, chỉ những điểm đó sẽ được kết nối với nhau). Tôi đã làm cho lớp biểu đồ cơ sở được tham số hóa sao cho trục X và Y có thể có bất kỳ loại nào, nhưng hiện tại tôi chỉ sử dụng đối tượng DateTime cho kiểu X và tăng gấp đôi cho kiểu y, do đó DatedChart sẽ có chuỗi dữ liệu là cặp. Ví dụ về mô hình biểu đồ này sẽ là biểu đồ thể hiện danh tiếng của bốn người dùng Stack Overflow trong một khoảng thời gian tháng. Mỗi người dùng sẽ có một loạt các điểm riêng (x, y), trong đó x là DateTime của một ngày và y là một số bài viết.

Answer 1

tôi đã không nhận được như thế nào mô hình của bạn hoạt động (DatedChart vv là gì) nhưng ở đây là làm thế nào tôi sẽ vẽ biểu đồ:

Mẫu

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

điều khiển hành động

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>