谷歌API图表在ASP.净MVC

本文关键字:ASP MVC API 谷歌 | 更新日期: 2023-09-27 17:51:09

我正在使用google api创建一个simplechart

    [AllowAnonymous]
    public JsonResult PieChart()
    {
      return Json("[['"State'",'"Total'"],['"GA'",50], ['"AL'",30]]",JsonRequestBehavior.AllowGet);
    }

我通过ajax从我的视图调用这个方法。下面是我的视图

@{
    ViewBag.Title = "Visuals";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Visuals</h2>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
          var jsonData = $.ajax({
                type: 'GET',
                url: '@Url.Action("PieChart","Home")',
                dataType: "json",
                async: false
           }).responseText;
        var data = google.visualization.arrayToDataTable(jsonData, false);
        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };
        var chart = new google.visualization.PieChart($('#piechart_3d')[0]);
        chart.draw(data, options);
      }
</script>

然而,我得到一个javascript错误在这一行说,不是一个数组

var data = google.visualization.arrayToDataTable(jsonData, false);

我也尝试过JSON。解析,但没有成功。谢谢你的帮助。

谷歌API图表在ASP.净MVC

我会尝试设置contentType并在成功处理程序中处理结果,而不是像下面这样:

      $.ajax({
            type: 'GET',
            url: '@Url.Action("PieChart","Home")',
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            async: false,
            success: function(result) {
                  jsonData = result;
           }
       });

当我尝试这个时,您返回的数据看起来很好:

http://jsfiddle.net/Qquse/547/

不幸的是,hutchonoid的回答并不完全适用于我。我必须将数组代码更改为:

object[][] arr = new object[][] { new object[] { "Trickle", "Count" }, new object[] { "Ga", 50 }, new object[] { "Ga", 50 } };