Как обновить круговую диаграмму Google с помощью jQuery ajax - PullRequest
Новая
       14

Как обновить круговую диаграмму Google с помощью jQuery ajax

0 голосов
/ 10 января 2019

Я использую Круговую диаграмму Google для визуализации данных и отображения данных о загрузке страницы, и теперь мне приходится обновлять круговую диаграмму, когда пользователь выбирает любой класс, и данные обновляются с помощью ajax, но я не знаю, как обновить круговую диаграмму с помощью ajax, поэтому постарайтесь дать рекомендации о том, как обновить круговую диаграмму.

ВЫБРАТЬ ВАРИАНТ 

<div>
    <select name="class" id="class" class="selectpicker">
        <option value="1">Class 1</option>
        <option value="2">Class 2</option>
    </select>
</div>

Диаграмма пирога HTML 

<div id="donutchart" style="width: 900px; height: 350px;"></div>
<div id="chart"></div>
<div id="labelOverlay">
    <p class="used-size piecolor">50<span>%</span></p>
    <p class="total-size piecolor"> Progress</p>
</div>

SCRIPTS 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
$(document).ready(function () {
        $('#class').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
            var selected = $(e.currentTarget).val();
            if (selected > 0) {
                $.ajax({
                    url: '/reports/?classId=' + selected + '&type=progress',
                    type: 'get',
                    dataType: 'html',
                    beforeSend: function () {

                    }
                }).done(function (learnerProgress) {

                }).fail(function (jqXHR, ajaxOptions, thrownError) {

                });
            }
        });
    });
</script>

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

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Effort', 'Amount given'],
            ['Mastered', 80],
            ['Acquired', 40],
            ['Under Acquisition', 40],
            ['Needs More Practice', 20],
            ['Not started', 20],
        ]);

        var options = {
            //is3D:true,
            'tooltip': {
                trigger: 'none'
            },
            pieSliceText: "none",
            enableInteractivity: false,
            pieHole: 0.7,
            pieSliceTextStyle: {
                color: 'black',
            },
            slices: {
                0: {
                    color: '#009487'
                },
                1: {
                    color: '#88C157'
                },
                2: {
                    color: '#FFEA55'
                },
                3: {
                    color: '#FF972D'
                },
                4: {
                    color: '#FA463D'
                }
            }
            //legend: 'none'
        };

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

1 Ответ

0 голосов
/ 10 января 2019

Во-первых, оператор загрузки Google будет ждать загрузки страницы по умолчанию.

, поэтому используйте -> google.charts.load

вместо -> $(document).ready

Как только Google загрузится, создайте диаграмму, параметры и настройте событие выбора изменения.

при условии, что данные ajax имеют следующий формат, 

[
  ['Effort', 'Amount given'],
  ['Mastered', 80],
  ['Acquired', 40],
  ['Under Acquisition', 40],
  ['Needs More Practice', 20],
  ['Not started', 20],
]

см. Следующий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

  var options = {
    tooltip: {
      trigger: 'none'
    },
    pieSliceText: "none",
    enableInteractivity: false,
    pieHole: 0.7,
    pieSliceTextStyle: {
      color: 'black',
    },
    slices: {
      0: {
        color: '#009487'
      },
      1: {
        color: '#88C157'
      },
      2: {
        color: '#FFEA55'
      },
      3: {
        color: '#FF972D'
      },
      4: {
        color: '#FA463D'
      }
    }
  };

  $('#class').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
    var selected = $(e.currentTarget).val();
    if (selected > 0) {
      drawChart(selected);
    }
  });

  function drawChart(selected) {
    $.ajax({
      url: '/reports/?classId=' + selected + '&type=progress',
      type: 'get',
      dataType: 'html',
      beforeSend: function () {

      }
    }).done(function (learnerProgress) {

      var data = google.visualization.arrayToDataTable(learnerProgress);
      chart.draw(data, options);

    }).fail(function (jqXHR, ajaxOptions, thrownError) {

    });
  }

  // on page load
  drawChart($('#class').val());
});

примечание: следующее не нужно, это оператор загрузки из старой версии. 

google.load('visualization', '1', options);
...