две линии в одной 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))
        )      
    )
    %>

К сожалению, это не работает.Есть ли простое решение для отображения двух наборов данных на одном графике?

Обратите внимание, что значения X для обеих серий одинаковы.Различаются только Y.

Спасибо.

Answer 1

Классу необходимо второе свойство Y, чтобы вы могли иметь 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);
  }