如何使用jQuery Ajax更新Google饼图 [英] How to update google pie chart using jQuery ajax

问题描述

我正在使用 Google饼图进行数据可视化和显示页面加载数据，现在当用户选择任何类时，我必须更新饼图，并且数据将使用ajax更新，但我不知道如何使用ajax更新饼图，因此请尝试提供有关如何更新饼图的指南。

I am using Google Pie Chart for data visualization and displaying data on page load and now I have to updated pie chart when user select any class and data will update with ajax but I don't know how to update pie chart with ajax so try to provide your guidance how to pie update chart.

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

PIE CHART HTML

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

推荐答案

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

first, google's load statement will wait for the page to load by default.

请使用-> google.charts.load

而不是-> $（document）.ready

一旦Google已加载，请创建图表，选项和设置选择更改事件。

once google has loaded, create the chart, options, and setup select change event.

假设ajax数据采用以下格式，

assuming the ajax data is in the following format,

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

请参阅以下代码段...

see following snippet...

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

注意：以下内容不是必需的，这是旧版本的load语句。

note: the following isn't needed, this is the load statement from the old version.

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

这篇关于如何使用jQuery Ajax更新Google饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！