1つのtelerikチャート（のasp.net MVC）

Question

の2行、私はこのようなクラスがあります：私はAのデータを使用することはできません

IList<RadChartRow>[] array = new IList<RadChartRow>[2]; 

array[0] = BlaRepository.GetBla1(Id1); 
array[1] = BlaRepository.GetBla2(Id1,Id2); 

ViewData["TimeSeries"] = array; 

：私のコントローラで

public class RadChartRow 
{ 
public virtual string X { get; set; } 
public virtual int Y { get; set; } 
} 

を私はこれを行います私はViewDataを（あまりにもかかわらず、袋を使用することができます）

を使用する必要がありますので、強く型付けされたビューは、とにかくこれは、いくつかのビューのコードです：

<%= (Html.Telerik().Chart((IList<RadChartRow>[])ViewData["TimeSeries"]) 
     .Name("chart") 
     .Theme("Web20") 
     .Title(title => title 
      .Text("Bla") 
      .Visible(false) 
     ) 
     .Series(series => 
     { 
      series.Line(s => s[0].Y).Name("Bla").Color("gray").Markers(markers => markers.Type(ChartMarkerShape.Circle)).Labels(l => l.Position(ChartLineLabelsPosition.Above).Font("12px Arial, sans-serif").Visible(true)); 
      series.Line(s => s[1].Y).Name("Bla").Color("red").Markers(markers => markers.Type(ChartMarkerShape.Circle)).Labels(l => l.Position(ChartLineLabelsPosition.Above).Font("12px Arial, sans-serif").Visible(true)); 
     }) 
     .CategoryAxis(axis => axis 
       .Categories(s => s[0].X).Labels(labels => labels.Rotation(-90)) 
     )  
    ) 
    %> 

不幸なことに、これは機能しません。 1つのグラフに2つのデータセットを表示する簡単なソリューションはありますか？

両方のシリーズのX値が同じであることに注意してください。 Y字型のvaulesだけが異なります。

ありがとうございました。

Answer 1

2つの系列を持つことができるように、クラスには2番目のYプロパティが必要です。

public class RadChartRow 
{ 
    public virtual string X { get; set; } 
    public virtual int Y1 { get; set; } 
    public virtual int Y2 { get; set; } 
} 

コントローラは、ViewDataを使用する代わりにリストにリストを戻すことができます。

IList<RadChartRow> list = new List<RadChartRow>(); 

    RadChartRow rcr = new RadChartRow(); 
    rcr.X = "One"; 
    rcr.Y1 = 15; 
    rcr.Y2 = 23; 
    list.Add(rcr); 
    rcr = new RadChartRow(); 
    rcr.X = "Two"; 
    rcr.Y1 = 8; 
    rcr.Y2 = 3; 
    list.Add(rcr); 
    rcr = new RadChartRow(); 
    rcr.X = "Three"; 
    rcr.Y1 = 13; 
    rcr.Y2 = 25; 
    list.Add(rcr); 
    rcr = new RadChartRow(); 
    rcr.X = "Four"; 
    rcr.Y1 = 25; 
    rcr.Y2 = 32; 
    list.Add(rcr); 

    return View(list); 

ビューへの唯一の変更は、ビューに渡されるモデルを使用することです。

@model IList<RadChartRow> 

(Html.Telerik().Chart(Model) 
    .Name("chart") 
    .Theme("Web20") 
    .Title(title => title 
     .Text("Bla") 
     .Visible(false) 
    ) 
    .Series(series => 
    { 
     series.Line(s => s.Y1).Name("Bla1") 
     .Color("gray") 
     .Markers(markers => markers.Type(ChartMarkerShape.Circle)) 
     .Labels(l => l.Position(ChartLineLabelsPosition.Above).Font("12px Arial, sans-serif").Visible(true)); 
     series.Line(s => s.Y2).Name("Bla2") 
     .Color("red") 
     .Markers(markers => markers.Type(ChartMarkerShape.Circle)) 
     .Labels(l => l.Position(ChartLineLabelsPosition.Above).Font("12px Arial, sans-serif").Visible(true)); 
    }) 
    .CategoryAxis(axis => axis 
      .Categories(s => s.X) 
      .Labels(labels => labels.Rotation(-90)) 
    ) 
) 

グラフは次のようになります。

更新：

あなたが結合モデルを使用したくない場合は、バインディング、AJAXを使用することができます。ビューで、データバインディングを設定します。

Html.Telerik().Chart<RadChartRow>() 
    .DataBinding(dataBinding => dataBinding.Ajax().Select("_Chart2Ajax", "Chart")) 
    .Name("chart") 

コントローラでは、ビューの空のビューを返します。

return View(); 

次に、ajaxデータバインディングのための別の方法があります。

public ActionResult _Chart2Ajax() 
    { 
    IList<RadChartRow> list = new List<RadChartRow>(); 

    RadChartRow rcr = new RadChartRow(); 
    rcr.X = "One"; 
    rcr.Y1 = 15; 
    rcr.Y2 = 23; 
    list.Add(rcr); 
    //.... code left out to save space 

    return Json(list); 
    }