兩條線在一個Telerik的圖表（asp.net MVC）

Question

我有這樣一類：

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

以我控制器我這樣做：

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

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

ViewData["TimeSeries"] = array; 

我不能在使用數據強類型的觀點，所以我必須使用的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)) 
     )  
    ) 
    %> 

Unfortunatley這不起作用。有一個簡單的解決方案來描繪兩組數據在一個圖表？

請注意，這兩個系列的X值是相同的。只有Y值不同。

謝謝。

Answer 1

這個班第二是房產，這樣就可以有2個系列。

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