Gráficos de Google (GeoChart) - Acercar más cerca

Question

Usando Google Charts GeoChart: https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart

¿Es posible hacer un zoom más cerca que sólo una región en su conjunto? Es decir, para llegar al nivel de vista de la calle de un mapa, y aún colocar marcadores como se ve en el ejemplo de marcador en el enlace de arriba?

Gracias a todos por la ayuda ...

Answer 1

La API no es compatible con el zoom, arrastrar, o el desplazamiento.

Answer 2

Tuve el mismo problema, y ​​GeoChart resultó ser demasiado limitado en ese sentido.

Una opción es utilizar Google Maps y Data Layers. Si necesita marcadores de colores y tamaños, por ejemplo, usted podría hacer algo como el ejemplo de la página siguiente (ver 'estilo avanzado'): https://developers.google.com/maps/documentation/javascript/examples/layer-data-quakes

Tendrá que poner en práctica su propia interpolación para determinar el tamaño y colores, pero el mapa/gráfico resultante será mejor que GeoChart solo.

Answer 3

Parece que Google Charts ahora tiene una opción de expiración llamada 'explorer' que funciona para algunos tipos de gráfico. Ver: https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options

Answer 4

Como un truco, utilicé la propiedad css zoom con desbordamiento: oculto en el contenedor. Pero debe ejecutarse después de chart.draw(), en el evento google chart ready.

Y si necesita volver a dibujar (estoy redibujando en el tamaño de la ventana para garantizar la capacidad de respuesta), debe volver a forzar el zoom al 1 o al 100% antes de volver a dibujarlo.

HTML:

<div id="container" style="overflow:hidden; width:..px;"> 
    <div id="chart_div"></div> 
</div> 

JS (jQuery):

$("#chart_div").css("zoom",1); 

// [... google chart code generation ...] 

google.visualization.events.addListener(chart, 'ready', function() { $("#chart_div").css("zoom",1.4); }); 
chart_draw(data, options); 

Se trabajó para mí y vale la pena el intento.