javascript - 重置图表，API 可视化谷歌地球

Question

我正在开发一个应用程序来显示来自 gpx 文件的路线海拔高度。我使用来自谷歌的 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