Kreisdiagramm auf einer Google map
Will ich zeichnen Kreisdiagramme auf mehrere Standorte in einer Google-Karte. Gibt es eine Möglichkeit, zeichnen Sie ein google Kreisdiagramm in einer bestimmten Position in einer Google Map darstellen eines Datensatzes (wie Bevölkerung in einem bestimmten Ort/Stadt)?
Ich kam mit einer Lösung und zeigt den code, den ich schrieb, um die Anzeige ein Tortendiagramm-Symbol in eine Besondere Lage.
Ich habe einige andere Anforderung zum hinzufügen von Ereignis-listener, um das pi-Diagramm-Symbol, um den Bildschirm ein Fenster mit ausführlicheren Kreisdiagramm. Ich kam mit dem code unten, wie eine Lösung für diese Anforderungen, aber es wird nicht angezeigt das Fenster, wenn das Symbol geklickt wird. Können Sie bitte, helfen Sie finden hier das Problem?
<html>
<head>
<link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.10&sensor=false&.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
google.load( 'visualization', '1', { packages:['corechart'] });
function drawChart(marker, data) {
var options = {'title':'Perception Analysis '+
marker.getPosition().toString(),
'width':400,
'height':150};
var node = document.createElement('div'),
infoWindow = new google.maps.InfoWindow(),
chart = new google.visualization.PieChart(node);
chart.draw(data, options);
infoWindow.setContent(node);
infoWindow.open(marker.getMap(),marker);
}
function ChartMarker( options ) {
this.setValues( options );
this.$inner = $('<div>').css({
position: 'relative',
left: '-50%', top: '-50%',
width: options.width,
height: options.height,
fontSize: '1px',
lineHeight: '1px',
padding: '2px',
backgroundColor: 'transparent',
cursor: 'default'
});
this.$div = $('<div>')
.append( this.$inner )
.css({
position: 'absolute',
display: 'none'
});
};
ChartMarker.prototype = new google.maps.OverlayView;
ChartMarker.prototype.onAdd = function() {
$( this.getPanes().overlayMouseTarget ).append( this.$div );
};
ChartMarker.prototype.onRemove = function() {
this.$div.remove();
};
ChartMarker.prototype.draw = function() {
var marker = this;
var projection = this.getProjection();
var position = projection.fromLatLngToDivPixel( this.get('position') );
this.$div.css({
left: position.x,
top: position.y,
display: 'block'
})
this.$inner
.html( '<img src="' + this.get('image') + '"/>' )
.click( function( event ) {
var events = marker.get('events');
events && events.click( event );
});
this.chart = new google.visualization.PieChart( this.$inner[0] );
this.chart.draw( this.get('chartData'), this.get('chartOptions') );
};
function initialize() {
var latLng = new google.maps.LatLng( 40.708762, -74.006731 );
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var data = google.visualization.arrayToDataTable([
[ 'Task', 'Hours per Day' ],
[ 'Work', 11 ],
[ 'Eat', 2 ],
[ 'Commute', 2 ],
[ 'Watch TV', 2 ],
[ 'Sleep', 7 ]
]);
var options = {
fontSize: 8,
backgroundColor: 'transparent',
legend: {position: 'none'}
};
var marker = new ChartMarker({
map: map,
position: latLng,
width: '250px',
height: '100px',
chartData: data,
chartOptions: options,
events: {
click: function( event ) {
drawChart(this,data)
}
}
});
};
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 900px; height: 500px;"></div>
</body>
</html>Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn du redest, Kreisdiagramm, gezeichnet mit der Visualization API, Sie könnte verwenden Sie eine benutzerdefinierte HTML-overlay, wie der in diese Geige:
<div>mit einer CSS -background-imagemit dem Diagramm-API Bild-URL und der Inhalt der<div>ist die Anzahl. Sie können sehen, was Sie tun, indem Sie mithilfe der Google Chrome (oder anderen browser) DOM inspector, untersuchen eines der Kreisdiagramme.Kürzlich hatte ich zu implementieren, pie-charts, die als Marker für viele Standorte auf der Karte.
Viele Orte auf der Karte in der app auch erforderlich, marker clustering...
In meinem speziellen Fall anzeigen pie-chart als overlay passte nicht, deshalb
Ich baute einfache Bibliothek.
Vielleicht sagen, dass es-Bibliothek ist zu viel, weil es nur eine Funktion für jetzt
generiert pie-char svg-Knoten.
Github repository mit einem Beispiel, wie die Funktion zusammen mit google-maps unten
Repository