带有 Asp.net MVC 的 Kendo UI 图表

Posted 2023-05-07

技术标签:

【中文标题】带有 Asp.net MVC 的 Kendo UI 图表【英文标题】：KendoUI charts with Asp.net MVC 【发布时间】：2012-08-06 18:47:21 【问题描述】：

我正在寻找有关如何在网页上显示 KendoUI 图表以及从数据库中获取数据的教程和代码示例。更准确地说是一个 ASP.Net MVC 网页；就像需要在服务器端执行的操作才能显示在 KendoUI 图表上显示的控制器方法上计算的数据。

具体问题是：

return View(vmObj);

到目前为止，我看到的 KendoUI 文档仅显示客户端代码，而不是针对 AspNet MVC 开发人员量身定制的。

感谢您的宝贵时间..

【问题讨论】：

【参考方案1】：

Kendo 曾经有一些 ASP.NET MVC 演示，您可以下载并在 Visual Studio 中运行以了解如何绑定到远程数据等，但由于某种原因它们被删除了。这是我根据这些演示制作的一个简单示例：

控制器动作（例如在“ChartsController.cs”中）：

public ActionResult Index()

    return View();

public ActionResult GetChartData()

    IEnumerable<ChartModel> chartData = SomeRepository.GetData();
    return Json(chartData);

图表模型：

public class ChartModel

    public ChartModel(string year, int val2, int val3)
    
        Year = year;
        Val2 = val2;
        Val3 = val3;
    
    
    public string Year  get; set; 
    public int Val2  get; set; 
    public int Val3  get; set;

查看（“Charts/Index.cshtml”，不包括布局）：

<div class="chart-wrapper">
@(Html.Kendo().Chart<ChartExample.Models.ChartModel>()
    .Name("chart")
    .Title("Example Column Chart")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Top)
    )
    .DataSource(ds => ds.Read(read => read.Action("GetChartData", "Charts")))
    .Series(series => 
        series.Column(model => model.Val2).Name("Val2");
        series.Column(model => model.Val3).Name("Val3");
    )
    .CategoryAxis(axis => axis
        .Categories(model => model.Year)
        .Labels(labels => labels.Rotation(-90))
    )
    .ValueAxis(axis => axis.Numeric()
        .Labels(labels => labels.Format("0:N0"))
        .MajorUnit(10000)
    )
) 
</div>

此示例使用单独的控制器操作来获取视图和获取图表的数据，但您也可以将它们组合起来并拥有 return View(chartData); 并且只在您的视图中：

@model IEnumerable<ChartExample.Models.ChartModel>
<div>
    @(Html.Kendo().Chart(Model)
        // just don't include the ".DataSource" line
        // ...
    )
</div>

很遗憾，我无法告诉您是否可以使用 Webforms 来完成，因为我以前从未使用过它。希望这会有所帮助！

【讨论】：

【参考方案2】：

Kendo UI 为 ASP.NET MVC 提供官方包装器。

它们取代了旧的 Telerik Extensions for ASP.NET MVC。现有用户应该看看Migration Guide。完整的文档是docs.kendoui.com site 的一部分。

Trial 包含服务器端包装器和离线演示。您可以在kendoui.trial.x.y.z.zip 包的wrappers\aspnetmvc 文件夹中找到它们。

【讨论】：

【参考方案3】：

以下是您问题的一些答案（未分类）

图表始终在客户端初始化

javascript

【讨论】：