मेरे मॉडल वर्ग

Question

से एक केंडो चार्ट दृश्य बनाना मैं एमवीसी फ्रेमवर्क और केंडो दोनों के लिए नया हूं, इसलिए आपको मेरे साथ सहन करना होगा। यहाँ मेरी चार्ट आधार वर्ग (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); 
    } 
} 

मैं क्या करने की जरूरत है एक ऐसा दृश्य बनाने के लिए जो इन चार्टों में से एक प्रदर्शित करेगा। मैंने कई उदाहरण पढ़े हैं, लेकिन मेरे लिए यह देखना मुश्किल है कि वे जो भी करने की कोशिश कर रहे हैं उस पर वे कैसे लागू होते हैं - उनमें से बहुत से आपके फिट होने के तरीके पर चमकते हैं एक मनमाना मॉडल के चारों ओर देखें। मुझे किसी उदाहरण के लिए कुछ भी पसंद नहीं है, बस कुछ ऐसा जो मुझे दिखाएगा कि इनमें से किसी एक चार्ट से डेटा को प्रारूप में कैसे प्राप्त किया जाए, जहां केंडो लाइन लाइन कक्षा श्रृंखला प्रदर्शित कर सकते हैं। मेरा विचार कुछ इस तरह दिख सकता है:

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

कोई संकेत?

संपादित करें:

मॉडल मेरे मॉडल चार्ट वस्तुओं, जहां प्रत्येक चार्ट एक शीर्षक है के होते हैं की व्याख्या, एक्स अक्ष, y- अक्ष, और एक या अधिक डेटा श्रृंखला का एक सेट। प्रत्येक श्रृंखला अंक का एक अलग सेट है (यानी यह अपने रंग में होगी, और यदि यह एक रेखा चार्ट है, तो केवल वे बिंदु एक-दूसरे से जुड़े होंगे)। मैंने आधार चार्ट क्लास को पैरामीटर बनाया है ताकि एक्स और वाई अक्षों में कोई प्रकार हो, लेकिन अभी के लिए मैं एक्स प्रकार के लिए डेटटाइम ऑब्जेक्ट्स का उपयोग कर रहा हूं और वाई प्रकार के लिए डबल्स का उपयोग कर रहा हूं, इसलिए डेटेड चार्ट जिसमें श्रृंखला होगी जिसका डेटा पॉइंट होगा के जोड़े हैं इस चार्ट मॉडल का एक उदाहरण एक ग्राफ होगा जो एक महीने की अवधि में चार स्टैक ओवरफ़्लो उपयोगकर्ताओं की प्रतिष्ठा दिखा रहा है। प्रत्येक उपयोगकर्ता के पास अपनी स्वयं की श्रृंखला (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); 
} 

वीआई 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>