选项更改时清除条形图

Question

当我根据选择条形图选择季度和年份时，会创建。当我选择其他选项时，应清除先前创建的条形图。但它仍然显示了之前选择的条形图。

var chart1 = new google.visualization.ColumnChart(
   document.getElementById('chart0')
   );
var chartTotal1 = new google.visualization.ColumnChart(
  document.getElementById('chart1')
   );
  $.ajax({
         url: url,
         type: "Get",
         dataType: "json",
         data: {
             Year: selectedYear,
             Filtertxt: selectedQuarter
         },
         crossDomain: true,
         success: function(data) {
                 if (data.length > 0) {

                if (selectedQuarter == 'Q1') {

                    drawchartQ1(data);

                }

                else {
                    clearChart1();
                }

                if (selectedQuarter == 'Q2') {

                    drawchartQ2(data);


                }
                else {
                    clearChart1();
                }


                if (selectedQuarter == 'Q3') {

                    drawchartQ3(data);

                }

                else {
                    clearChart1();
                }

                if (selectedQuarter == 'Q1,Q2,Q3,Q4') {


                    drawchartAll(data);
                }

                else {
                    clearChart1();
                }


            }


}
    });

    function clearChart1() {
        chart1.clearChart();
        chartTotal1.clearChart();
    }

    function drawchartQ1(data) {
        // another  graph to display the total of sprint
        var total = 0;
        for (var i = 0; i < data.length; i++) {
            total = total + data[i].TotalAmt;
        }
        var data2 = google.visualization.arrayToDataTable([
       ['Months', 'Total'],
       [null, total],
       [null, null]




        ]);

        var options = {
            width: 600,
            height: 400,
            vAxis: {
                title: ""
            },

            isStacked: true,
            hAxis: {
                title: "All Months"
            }
        };

        options.title = 'Quarter 1 Total';
        chartTotal1.draw(data2, options);


        var data1 = google.visualization.arrayToDataTable([
        ['Month', 'ID1', 'ID2', 'ID3', 'ID4', 'ID5'],
        ['Jan,2017', data[0].TotalAmt, null, null, null, null],

        ['Feb,2017', null, data[1].TotalAmt, data[2].TotalAmt, null, null],

        ['Mar,2017', null, null, null, data[3].TotalAmt, data[4].TotalAmt],


        ]);

        var options = {
            width: 600,
            height: 400,
            vAxis: {
                title: ""
            },

            isStacked: true,
            hAxis: {
                title: "Month"
            }
        };

        options.title = 'Quarter 1';
        chart1.draw(data1, options);


    }

Answer 1

保存对图表的引用，以便稍后清除

使用图表方法 - ＆gt; clearChart()

设置类似于以下代码段...

function drawCharts() {
  var chart1 = new google.visualization.ColumnChart(
    document.getElementById('chart0')
  );
  var chartTotal1 = new google.visualization.ColumnChart(
    document.getElementById('chart1')
  );

  $.ajax({
    url: url,
    type: "Get",
    dataType: "json",
    data: {
      Year: selectedYear,
      Filtertxt: selectedQuarter
    },
    crossDomain: true,
  }).done(function (data) {
    if (data.length > 0) {
      switch (selectedQuarter) {
        case 'Q1':
          drawchartQ1(data);
          break;

        case 'Q2':
          drawchartQ2(data);
          break;

        case 'Q3':
          drawchartQ3(data);
          break;

        case 'Q4':
          drawchartQ4(data);
          break;

        default:
          clearChart1();
      }
    } else {
      clearChart1();
    }
  });

  function clearChart1() {
    chart1.clearChart();
    chartTotal1.clearChart();
  }

  function drawChart1(data) {
    var data1 = google.visualization.arrayToDataTable([
      ['Month', 'ID1', 'ID2', 'ID3', 'ID4', 'ID5'],
      ['Jan,2017', data[0].TotalAmt, null, null, null, null],
      //['Jan,2017', null, null, null, null, null],
      ['Feb,2017', null, data[1].TotalAmt, data[2].TotalAmt, null, null],
      //['Feb,2017', null, null, null, null, null],
      ['Mar,2017', null, null, null, data[3].TotalAmt, data[4].TotalAmt],
      //['Mar,2017', null, null, null, null, null]
    ]);
    var options = {
      width: 600,
      height: 400,
      vAxis: {
        title: ""
      },
      isStacked: true,
      hAxis: {
        title: "Month"
      }
    };
    options.title = 'Quarter 1';

    chart1.draw(data1, options);

    // another  graph to display the total of sprint
    var total = 0;
    for (var i = 0; i < data.length; i++) {
      total = total + data[i].TotalAmt;
    }

    var data2 = google.visualization.arrayToDataTable([
      ['Months', 'IDs'],
      [null, total],
      [null, null]
    ]);
    var options = {
      width: 600,
      height: 400,
      vAxis: {
         title: ""
      },
      isStacked: true,
      hAxis: {
         title: "All Months"
      }
    };
    options.title = 'Quarter 1 Total';
    chartTotal1.draw(data2, options);
  }
}