选项更改时清除条形图

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

保存到图表的引用，这样你就可以清除它以后

用图表法 - >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); 
    } 
}