0

Google チャートを使用して ASP.net MVC プロジェクトにチャートを追加しようとしました

私はそれがどのように機能するかを理解するために最も簡単な方法を使用しました!

私のコントローラーで： 

  public JsonResult Index()
        {

            var data = new[]
                {
                    new {Name = "China", Value = 1336718015},
                    new {Name = "India", Value = 1189172906},
                    new {Name = "United States", Value = 313232044},
                    new {Name = "Indonesia", Value = 245613043},
                    new {Name = "Brazil", Value = 203429773},
                };

            return Json(data,JsonRequestBehavior.AllowGet);
        }

私のウェブページで

</script><script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">// <![CDATA[
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {

        $.post('index', {},
            function (data) {
                var tdata = new google.visualization.DataTable();

                tdata.addColumn('string', 'Country');
                tdata.addColumn('number', 'Population');

                for (var i = 0; i < data.length; i++) {
                    tdata.addRow([data[i].Name, data[i].Value]);
                }

                var options = {
                    title: "Top 5 Country's Population"
                };

                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(tdata, options);
            });

    }
// ]]></script>
<div id="chart_div"></div>

私が持っているのは、ページ上のテキストだけです:

[{"名前":"中国","値":1336718015},{"名前":"インド","値":1189172906},{"名前":"米国","値":313232044}, {"名前":"インドネシア","値":245613043},{"名前":"ブラジル","値":203429773}]

4

1 に答える 1

0

作業しようとしている例では、2 つのページが必要です。1 つはチャートを表示するページ (HTML と Javascript を含むページ) で、もう 1 つはデータを提供するページ (MVC コントローラー) です。

その後、投稿行を MVC ページに設定する必要があります。

$.post('page/address', {},

も使用できますindexが、この場合、HTML を含むページを別のファイルに移動する必要があります (例: chart.html)

于 2013-04-29T00:00:53.027 に答える