Google图表-未绘制-JSON响应

Question

我想领导Google图表对我来说是全新的，我可能犯了一个非常愚蠢的错误。我整天都在工作，无论我做什么，我都无法使用json数据绘制谷歌图表。我认为这与列和行有关。我已经以不同的方式进行了很多更改，并且放弃了以下信息。我没有收到任何错误，但我的图表未加载。现在，我看了这么多线程和示例，没有任何意义。任何帮助表示赞赏！

<div class="col-lg-12">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="pieDisconnectReasonsChart" style="min-height:271px"></div>
</div>

<script>
       google.charts.load("current", { packages: ["corechart"] });
        google.charts.setOnLoadCallback(drawDisconnectReasonsChart);

        function drawDisconnectReasonsChart() {

                var jsonData = $.ajax({
                    url: "/Reports/RunDisconnectReasonsReport",
                    type: "POST",
                    dataType: "json",
                    data: {
                        openDate: @Html.Raw(Json.Encode(Model.OpenDate)),
                        closeDate: @Html.Raw(Json.Encode(Model.CloseDate)),
                    },
                })
                    .done(function (jsonData) {
                        var data = new google.visualization.DataTable(jsonData);
                        data.addColumn("string", "SY_OPEN_LBL");
                        data.addColumn("string", "SY_DESCRIPTION");
                        data.addColumn("number", "TOTAL");
                        data.addColumn("number", "PERCTWODEC");
                        data.addColumn("number", "PERC");
                        data.addColumn("number", "ErrMsg");
                Object.keys(jsonData).forEach(function (row) {
                        data.addRow([
                            row.SY_DESCRIPTION,
                            row.SY_OPEN_LBL,
                            row.TOTAL,
                            row.PERCTWODEC,
                            row.PERC,
                            row.ErrMsg
                    ]);
                });
                var options = {
                    title: 'Disconnect Reasons',
                    titleTextStyle: { color: 'black', fontSize: 22, bold: true },
                    legend: {
                        position: 'bottom', textStyle: { fontSize: 8 }, alignment: 'center'
                    },
                    chartArea: {
                        width: '98%', height: '80%'
                    }
                    };

                    var chart = new google.visualization.PieChart(document.getElementById('pieDisconnectReasonsChart'));
                    debugger;
                chart.draw(data, options);
               });
             };
</script>

Answer 1

饼图的data format仅允许两个数据表列。一个字符串和一个数字。除非您提供自定义工具提示，否则允许使用第三字符串列。

---

接下来，您正在向数据表中手动添加列和行，因此您需要从构造函数中删除jsonData变量，在这里...

来自...

var data = new google.visualization.DataTable(jsonData);  // <-- remove jsonData

到...

var data = new google.visualization.DataTable();

如果您想直接从json创建数据表，json必须采用特定格式，可在此处找到...Format of the Constructor's JavaScript Literal data Parameter

使用上述方法，您无需手动添加列和行，并且图表会更快，具体取决于数据量...

---

尝试删除多余的列并更正构造函数，它应该可以正常工作，类似于以下工作片段...

google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawDisconnectReasonsChart);

function drawDisconnectReasonsChart() {
  var data = new google.visualization.DataTable();
  data.addColumn("string", "SY_OPEN_LBL");
  data.addColumn("number", "TOTAL");
  
  data.addRow([
    'CAT A',
    2
  ]);
  data.addRow([
    'CAT B',
    6
  ]);

  var options = {
    title: 'Disconnect Reasons',
    titleTextStyle: { color: 'black', fontSize: 22, bold: true },
    legend: {
        position: 'bottom', textStyle: { fontSize: 8 }, alignment: 'center'
    },
    chartArea: {
        width: '98%', height: '80%'
    }
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="pieDisconnectReasonsChart" style="min-height:271px"></div>

---

编辑

在done方法中，它似乎在json对象的键上循环播放。

Object.keys(jsonData).forEach(function (row) {

而是在json对象本身上循环。

jsonData.forEach(function (row) {

请参阅以下代码段...

google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawDisconnectReasonsChart);

function drawDisconnectReasonsChart() {
  var jsonData = $.ajax({
    url: "/Reports/RunDisconnectReasonsReport",
    type: "POST",
    dataType: "json",
    data: {
      openDate: @Html.Raw(Json.Encode(Model.OpenDate)),
      closeDate: @Html.Raw(Json.Encode(Model.CloseDate)),
    },
  }).done(function (jsonData) {
    var data = new google.visualization.DataTable();
    data.addColumn("string", "SY_OPEN_LBL");
    data.addColumn("number", "TOTAL");

    jsonData.forEach(function (row) {
      data.addRow([
        row.SY_DESCRIPTION,
        row.TOTAL
      ]);
    });

    var options = {
      title: 'Disconnect Reasons',
      titleTextStyle: { color: 'black', fontSize: 22, bold: true },
      legend: {
        position: 'bottom', textStyle: { fontSize: 8 }, alignment: 'center'
      },
      chartArea: {
        width: '98%', height: '80%'
      }
    };

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