json - JSON MVC 图表未在视图中呈现

问题描述

由于控制器和视图看起来正确，因此不完全确定这是怎么回事。我什至可以让 JSON 从控制器返回数据。

JSON 返回示例：

[{"Expr1":134,"Computer_Brand":"Windows 10"}]

我得到的只是一个没有图表或错误的空白页面渲染。真的在这件事上绞尽脑汁。任何帮助将非常感激。

控制器

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Services;
using System.Web.Services;
using expendit.Models;
using Newtonsoft.Json;
using Syncfusion.Linq;
using Syncfusion.Olap.MDXQueryParser;

namespace expendit.Controllers
{
    public class Charts_ComputerOSController : Controller
    {
    private HAWKTRAINING_ROIEntities1 db = new HAWKTRAINING_ROIEntities1();

    // GET: Charts_ComputerOS


    public ActionResult Index()
    {
        return View();
    }
    public JsonResult GetPiechartJSON()
    {
        using (var db = new HAWKTRAINING_ROIEntities1())
        {
            var result = (from tags in db.Charts_ComputerOS
                          orderby tags.Computer_Brand ascending
                          select new { tags.Expr1,        tags.Computer_Brand }).ToList();
            //return Json(JsonConvert.SerializeObject(result), JsonRequestBehavior.AllowGet);





            return Json(result, JsonRequestBehavior.AllowGet);

        }
    }
    public ContentResult GetDefect()
    {
        using (var db = new HAWKTRAINING_ROIEntities1())
        {

            var defect = (from d in db.Charts_ComputerOS

                          select new
                          {
                              d.Computer_Brand,
                              d.Expr1,

                          }).ToList();

            return Content(JsonConvert.SerializeObject(defect));
        }
    }
    JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };
}
}

看法

<script     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chartdiv"> </div>

<script type="text/javascript">
google.charts.load('current', {
    packages: ['corechart']
}).then(function () {

    $.ajax({
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
        url: 'GetPiechartJSON',
        data: '{}'
    }).done(function (response) {
        drawchart(response.d);
    }).fail(function (jqXHR, status, errorThrown) {
        //for example purposes
        drawchart([{ "Expr1": 134, "Computer_Brand": "Windows 10" }]);

        //console.log(status, errorThrown);
    });

    function drawchart(dataValues) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Computer_Brand');
        data.addColumn('number', 'Expr1');

        for (var i = 0; i < dataValues.length; i++) {
            data.addRow([dataValues[i].Computer_Brand, dataValues[i].Expr1]);
        }

        var chart = new google.visualization.ColumnChart  (document.getElementById('chartdiv'));
        chart.draw(data, {
            title: 'Computer OS Data',
            legend: {
                alignment: 'end',
                position: 'top'
            },
            fontsize: 14,
            chartArea: {
                width: '50%'
            }
        });
    }
});
</script>

标签： jsonasp.net-mvcmodel-view-controllerchartscontroller

首先，您需要加载谷歌图表，
不确定您是否已经这样做了，
但未显示在提供的代码中

请参阅以下工作片段，
尝试用以下内容替换您的脚本...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  $.ajax({
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    url: 'GetPiechartJSON',
    data: '{}'
  }).done(function (response) {
    drawchart(response.d);
  }).fail(function (jqXHR, status, errorThrown) {
    //for example purposes
    drawchart([{"Expr1":134,"Computer_Brand":"Windows 10"}]);

    //console.log(status, errorThrown);
  });

  function drawchart(dataValues) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Computer_Brand');
    data.addColumn('number', 'Expr1');

    for (var i = 0; i < dataValues.length; i++) {
      data.addRow([dataValues[i].Computer_Brand, dataValues[i].Expr1]);
    }

    var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'));
    chart.draw(data, {
      title: 'Computer OS Data',
      legend: {
        alignment: 'end',
        position: 'top'
      },
      fontsize: 14,
      chartArea: {
        width: '50%'
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chartdiv"></div>

json - JSON MVC 图表未在视图中呈现

问题描述

解决方案

推荐阅读