0

ASP.NET MVC 4 の HTML5 チャート ヘルパー拡張機能の作成 に示すように、MVC チャートを表示しようとしています。標準プロジェクトは機能していますが、単一のビューによって呼び出された部分ビューで複数のグラフを一度に表示することはできません。

ChartExtensions.csおよびHelperModel.csクラスについては上記の記事で説明しているため、レビューはスキップします。

いくつかのビューを持つコントローラーを作成しました。

public class WelcomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.Message = "Creating your own HtmlHelper library";
        var data = WelcomeHelper.GetData1();
        return View(data);
    }

    public ActionResult DisplayAllGraphs()
    {
        ViewBag.Message = "Show all charts";
        var dataSet = new DataGroup();
        dataSet.Datas.Add(WelcomeHelper.GetData1());
        dataSet.Datas.Add(WelcomeHelper.GetData2());
        return View(dataSet);
    }

    public ActionResult PartialDisplayGraphs(TwoDimensionalData data)
    {
        ViewBag.Message = "Chart by request";
        return View(data);
    }
}

クイックヘルパークラスを設定します

public class WelcomeHelper
{
    public static TwoDimensionalData GetData1()
    {
        var data = new TwoDimensionalData();
        data.Data.Add(new int[] { 2000, 3045 });
        data.Data.Add(new int[] { 2001, 7045 });
        data.Data.Add(new int[] { 2002, 9045 });
        data.Data.Add(new int[] { 2003, 13045 });
        data.Data.Add(new int[] { 2004, 15045 });
        data.Id = 1;
        return data;
    }

    public static TwoDimensionalData GetData2()
    {
        var data = new TwoDimensionalData();
        data.Data.Add(new int[] { 2005, 18045 });
        data.Data.Add(new int[] { 2006, 20845 });
        data.Data.Add(new int[] { 2007, 23045 });
        data.Data.Add(new int[] { 2008, 20345 });
        data.Data.Add(new int[] { 2009, 23405 });
        data.Id = 2;
        return data;
    }
}

すべてのグラフを表示しようとしましたDisplayAllGraphs.cshtml

@model PostingGraphs.Models.DataGroup
@{
    ViewBag.Title = "DisplayAllGraphs";
}

<h2>@ViewBag.Message</h2>
<section>
    @Html.Partial("PartialDisplayGraphs", data)
</section>

部分ビューのPartialDisplayGraphs.cshtml呼び出しは

@model PostingGraphs.Models.TwoDimensionalData
@using PostingGraphs.Extensions
@using (Html.BeginForm())
{   
    <label>Model ID: @Model.Id</label>
    @Html.Chart("sampleChart" + Model.Id, Model.Data, "Year", "Hits in Thousands") 
}

@section Scripts
{
<script type="text/javascript">
    $(function () {
        barChart();
    });   
</script>
}

私が得たのは、Model ID: #<section>というラベルが付いた一連の s で、# はモデルとして送信されるデータの ID と正しく一致しています。セクションは期待どおりに配置されていますが、得られないのはチャートです。

何か不足していますか？これは、javascript を作成するチャート拡張機能のコード内の識別子に問題がありますか?

編集: キャンバス ID の一意の識別子を追加して、データ ポイントのインデックスを含めました。フォーム発行内でフォームを変更しました。

4

1 に答える 1

0

問題は、Dot Net Curry のサンプル コードが、同じページで複数のチャートをうまく管理するように設定されておらず、かなりのやり直しが必要なことです。難しいことではありませんが、それ自体はあまり良い解決策ではありません。http://www.chartjs.org/でかなりまともな無料のグラフ セットを見つけました。私のために時間を割いて調査し、フィードバックをくれた方々に感謝します。

于 2013-09-21T00:25:39.420 に答える