如何使用 jQuery ajax 更新谷歌饼图

Question

我正在使用Google Pie Chart 进行数据可视化并在页面加载时显示数据，现在我必须在用户选择任何类时更新饼图，并且数据将使用 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>

脚本

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

Answer 1

首先，google的load语句会默认等待页面加载。

所以使用 --> google.charts.load

而不是 --> $(document).ready

加载 google 后，创建图表、选项并设置选择更改事件。

假设ajax数据格式如下，

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

看下面的sn-p...

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