Question

我正在使用Google Chart。在一些div上绘制一些饼图之后，我想清除画出图表的画布。

以下是完整的代码：http://plnkr.co/edit/f6nIBj5o9aawxClZUQjf?p=preview

我想要发生的是，当我在自上而下菜单中选择“2014”时，所有的PieCharts都会消失，因此只有2014年的图表显示。

我已经尝试过使用document.getElementById('div').clear和 document.getElementById('div').remove但两者都不起作用：

  var canvas = document.getElementById('method-select');
  canvas.onchange = function(){
      if(this.value == 'TimeSeriesComparison'){
        loadData(1965, 'div');
        loadData(1975, 'div1');
        loadData(1985, 'div2');
        loadData(1995, 'div3');
        loadData(2005, 'div4');
        loadData(2014, 'div5');  
      }else{
        canvas.clear;
        loadData(2014, 'div');  
      }
  };

on

<body>
<select id="method-select">
    <option value="TimeSeriesComparison" selected>Time Series Comparison</option>
    <option value="2014">2014</option>
</select>
 <div class="container">
  <div style="width: 100%; overflow: hidden;">
    <div id="div" style="float: left;"></div>
    <div id="div1" style="margin-left: 400px;"></div>
    <div id="div2" style="float:left"></div>
    <div id="div3" style="margin-left: 400px;"></div>
    <div id="div4" style="float: left;"></div>
    <div id="div5" style="margin-left: 400px;"></div>
    <div id="div6" style="float:left"></div>
  </div>

但图表没有被清除......

Answer 1

可能是最简单/最快的方法：

使用CSS隐藏特定<div> s

CSS：

 div.container>div.foo>div:nth-child(1n+2){display:none;}

...当第一个div确实有div.container类时，它会隐藏foo中第一个div的所有（除了第一个）子div之外。

现在你需要做的就是在这个div中添加或删除这个className：

    if (this.value == 'TimeSeriesComparison') {
      document.querySelector('.container>div').className='';

      loadData(1965, 'div');
      loadData(1975, 'div1');
      loadData(1985, 'div2');
      loadData(1995, 'div3');
      loadData(2005, 'div4');
      loadData(2014, 'div5');
    } 
    else { 
     document.querySelector('.container>div').className='foo';

      loadData(2014, 'div');
    }

http://plnkr.co/edit/uPHlHdSZ9iRmWjKlmuoz?p=preview

Answer 2

也许这对你有好处：

Plnkr

添加课程：class =＆＃34; chart＆＃34;加载和清除div：

(latX, longX) <-> (x, y, z)

使用Google Chart chart.draw（）方法绘制的明确Div

2 个答案: