Reset Chart，API可视化Google Earth

Question

我正在研究应用以显示来自gpx文件的路线的高程。我使用Google的API可视化来绘制结果，特别是我正在使用列图。

当我阅读一条路线时，图表会正确显示，但是当我阅读第二条gpx时，图表会一次显示两条路线，依此类推。我只想显示一个，绘制一条路线时如何重置图表？

这里是所有代码：

//Variables
var map=null;
var poly;
var rutaActual;
var chart;
var mousemarker = null;
var results={"latitud": [], "longitud": [],"elevacion": []};

google.maps.event.addDomListener(window, 'load', initialize);

google.load("visualization", "1", {packages: ["columnchart"]});
google.setOnLoadCallback(initialize);


/**
*   Inicializar Google Maps
*/
function initialize() {

var myLatlng = new google.maps.LatLng(43.373112,-5.669632);

var mapOptions = {
            zoom: 9,
            center: myLatlng,
            mapTypeControl: false,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
              },

              zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
                },

                panControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
                }

    };


  map = new google.maps.Map(document.getElementById('mapa'),mapOptions);

  inicializarElevacionMaps();     

}


function inicializarElevacionMaps(){

chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

  google.visualization.events.addListener(chart, 'onmouseover', function(e) {

      if (mousemarker == null) {
          mousemarker = new google.maps.Marker({
          position: new google.maps.LatLng(results.latitud[e.row],results.longitud[e.row]),
          map: map,
          icon: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
        });
      } else {
        mousemarker.setPosition(new google.maps.LatLng(results.latitud[e.row],results.longitud[e.row]));
      }


    });
}


/**
*   Cargar rutas GPX
*/
function rutaGPX(nombre){

rutaActual = nombre;

if(poly){

    poly.setMap(null);

}

iCl.ajax({
    type: "GET",
    url: "rutas/ficheros_gpx/"+nombre+".gpx",
    dataType: "xml",
    success: function (xml) {

         var points = [];
         poly = new google.maps.Polyline();
         var bounds = new google.maps.LatLngBounds();
         iCl(xml).find("trkpt").each(function () {
              var lat = iCl(this).attr("lat");
              var lon = iCl(this).attr("lon");
              var ele = iCl(this).find("ele").text();
              var p = new google.maps.LatLng(lat, lon);
              points.push(p);
              bounds.extend(p);
              results.latitud.push(lat);
              results.longitud.push(lon);
              results.elevacion.push(ele);

         });

         poly = new google.maps.Polyline({
              // use your own style here
              path: points,
              strokeColor: "#FE2E2E",
              strokeOpacity: .7,
              strokeWeight: 4
         });

         poly.setMap(map);
         map.fitBounds(bounds);

         //Draw chart
         plotElevation(results);

    }
   });


}

//Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a ColumnChart

function plotElevation(results) {
  var elevations=[];

  elevations = results.elevacion;

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Sample');
  data.addColumn('number', 'Elevation');
  for (var i = 0; i < elevations.length; i++) {
    data.addRow(['', parseInt(elevations[i])]);
  }

  document.getElementById('chart_div').style.display = 'block';
  chart.draw(data, {
    width: 512,
    height: 200,
    legend: 'none',
    titleY: 'Elevation (m)',
    focusBorderColor: '#00ff00'
  });
}

这里是chart的图像

Answer 1

我认为最简单的方法是执行以下操作：

var chart = app.getElementById('chart_div');
chart.clearChart(); 

在inicializarElevacionMaps（）中实例化图表之前。

参见：https://developers.google.com/chart/interactive/docs/gallery/columnchart#Methods

Answer 2

[Cambie el contenido HTML de un elemento“” con id =“ demo”：通过ejmeplo：document.getElementById（“ demo”）。innerHTML =“段落已更改！”;

 google.charts.load('current', {'packages':['line', 'corechart']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var button = document.getElementById('change-chart');
      var chartDiv = document.getElementById('chart_div');

      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Month');
      data.addColumn('number', "Average Temperature");
      data.addColumn('number', "Average Hours of Daylight");

      data.addRows([
        [new Date(2014, 0),  -.5,  5.7],
        [new Date(2014, 1),   .4,  8.7],
        [new Date(2014, 2),   .5,   12],
        [new Date(2014, 3),  2.9, 15.3],
        [new Date(2014, 4),  6.3, 18.6],
        [new Date(2014, 5),    9, 20.9],
        [new Date(2014, 6), 10.6, 19.8],
        [new Date(2014, 7), 10.3, 16.6],
        [new Date(2014, 8),  7.4, 13.3],
        [new Date(2014, 9),  4.4,  9.9],
        [new Date(2014, 10), 1.1,  6.6],
        [new Date(2014, 11), -.2,  4.5]
      ]);

      var materialOptions = {
        chart: {
          title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
        },
        width: 900,
        height: 500,
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Temps'},
          1: {axis: 'Daylight'}
        },
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Temps: {label: 'Temps (Celsius)'},
            Daylight: {label: 'Daylight'}
          }
        }
      };

      
      function drawMaterialChart() {
        var materialChart = new google.charts.Line(chartDiv);
        materialChart.draw(data, materialOptions);
        button.innerText = 'Change to Classic';
        button.onclick = drawClassicChart;
      } 
      
      drawMaterialChart();

    }

      function claerchart(){
      document.getElementById("chart_div").innerHTML = "";
      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <button onclick="claerchart()">limpiar</button>
  <br><br>
  <div id="chart_div"></div>