9

データベースから取得したデータを使用して Web ページに KendoUI チャートを表示する方法に関するチュートリアルとコード例を探しています。より正確には、ASP.Net MVC Web ページ。KendoUIチャートに表示されるコントローラーメソッドで計算されたデータを表示できるようにするためにサーバー側で行う必要があることなど。

具体的な質問は次のとおりです。

  1. KendoUI はサービスでのみ動作しますか、それとも ActionResult メソッドで ViewModel オブジェクトを として返すことはできますreturn View(vmObj);か?
  2. KendoUI チャートに戻るサーバー側のコードの例はありますか?
  3. KendoUI は MVC でのみ動作しますか、それとも Asp.Net WebForms でも使用できますか?

私がこれまで見てきた KendoUI のドキュメントは、クライアント側のコードのみを示しており、AspNet MVC 開発者向けには調整されていません。

御時間ありがとうございます..

4

3 に答える 3

12

Kendo には、Visual Studio でダウンロードして実行し、リモート データなどにバインドする方法を確認できる ASP.NET MVC デモがいくつかありましたが、何らかの理由で削除されました。これらのデモに基づいて作成した簡単な例を次に示します。

コントローラー アクション (「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>

残念ながら、これまで Web フォームを使用したことがないため、それが Web フォームで実行できるかどうかはわかりません。お役に立てれば！

于 2012-08-15T20:02:23.330 に答える
7

Kendo UI は、ASP.NET MVC の公式ラッパーを提供します。

これらは、ASP.NET MVC 用の古い Telerik 拡張機能に取って代わります。既存のユーザーは、移行ガイドを参照してください。完全なドキュメントはdocs.kendoui.c​​om サイトの一部です。

試用版には、サーバー側のラッパーとオフライン デモの両方が含まれています。それらはパッケージのwrappers\aspnetmvcフォルダーにあります。kendoui.trial.x.y.z.zip

于 2012-09-18T08:00:00.647 に答える
1

ここにあなたの質問に対するいくつかの回答があります (未分類)

  1. ここでこのデモを見てください- それはあなたのニーズを取得すると思います. グラフの下のボタンを使用して、ビュー/コントローラーとモデルを調べます
  2. コレクションがサーバー上のチャートに渡されることにも注意してください。チャートは常にクライアント上で初期化されます。
  3. KendoChart は、使用するデータがある限り、どこでも使用できます。ここでも、サービス/コントローラーへの呼び出しの結果である、ローカルの JavaScript 配列 JSON である可能性があります。
于 2012-08-09T17:33:03.163 に答える