Google Charts - Not Drawing - JSON Ответ - PullRequest
Новая
       3

Google Charts - Not Drawing - JSON Ответ

1 голос
/ 24 марта 2020

Я хотел бы привести с диаграммами Google, это совершенно новый для меня, и я мог бы сделать действительно глупую ошибку. Я работал над этим весь день, и независимо от того, что я делаю, я не могу заставить свою диаграмму 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>

1 Ответ

0 голосов
/ 24 марта 2020

формат данных для диаграммы ap ie допускает только два столбца таблицы данных.
одну строку и одно число.
, если вы не предоставите пользовательскую подсказку, а затем третью Разрешен столбец строк.

Далее вы вручную добавляете столбцы и строки в таблицу данных,
, поэтому вам нужно удалить переменную jsonData из конструктора, здесь ...

из ... 

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

в ... 

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

, если вы хотите создать таблицу данных непосредственно из json,
json должен быть в указанном формате c, найденном здесь ...
Формат Конструктора JavaScript Литеральные данные Параметр

указанным выше методом, вы бы не нужно вручную добавлять столбцы и строки,
и диаграмма будет быстрее, в зависимости от объема данных в любом случае ...

попробуйте удалить дополнительные столбцы и исправить конструктор,
и он должен работать, как в следующем рабочем фрагменте ... 

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) {

вместо l oop на самом объекте 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);
 });
};
...