0

我尝试使用 Google Charts 将图表添加到我的 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>

我所拥有的只是页面上的文字：

[{"Name":"China","Value":1336718015},{"Name":"India","Value":1189172906},{"Name":"United States","Value":313232044}, {“名称”：“印度尼西亚”，“价值”：245613043}，{“名称”：“巴西”，“价值”：203429773}]

4

1 回答 1

0

对于您尝试开始工作的示例，您需要两个页面 - 一个显示图表（一个包含 HTML 和 Javascript），另一个提供数据（您的 MVC 控制器）。

之后，您必须将帖子行设置到您的 MVC 页面：

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

您也可以使用index，但在这种情况下，您必须将带有 HTML 的页面移动到另一个文件（例如chart.html）

于 2013-04-29T00:00:53.027 回答