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

图表应如下所示。

Chart

<强>更新

如果您不想使用模型绑定，可以使用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);
  }

一个telerik图表中的两行（asp.net mvc）

1 个答案: