我想在google map infowindow的hightcharts中显示多个系列的数据。 它适用于一个系列，但我希望有一个系列。
有人帮我吗？很多THAAANKS！
这是我的代码，但它没有用。
的index.php
<script>
var dataSeries=null;
var dataRank=null;
var selectedname="";
$(document).ready(function() {
var locations =
<?php
$query->execute();
echo ("[");
while ($data = $query->fetch()) {
echo("[".$data['hot_webid'].",'".addslashes($data['hot_name'])."',".$data['hot_starrating'].",".$data['hot_latitude'].",".$data['hot_longitude']."],");
}
echo("];");
$query->closeCursor();
?>;
var iw = new google.maps.InfoWindow();
var centerMap = new google.maps.LatLng(0,0);
google.maps.event.addListener(iw,'domready',function(e) {
// Convert date into JS UTC date
for (var k=0; k<dataSeries.length; k++) {
var d=dataSeries[k][0].split(/[- :]/);
dataSeries[k][0]=Date.UTC(d[0], d[1]-1, d[2], d[3], d[4], d[5]);
}
for (var k=0; k<dataRank.length; k++) {
var d=dataRank[k][0].split(/[- :]/);
dataRank[k][0]=Date.UTC(d[0], d[1]-1, d[2], d[3], d[4], d[5]);
}
dataChart = {
chart: {
borderWidth: 2,
renderTo: document.getElementById('container'),
zoomType: 'x',
type:"spline",
lineWidth:0,
height:600,
width:500,
marginRight:40
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 0,
layout: 'vertical',
verticalAlign: 'top',
y: 0,
x: -140,
shadow: false,
floating : true
},
rangeSelector: {
enabled: false
},
title: {
text: selectedname
},
subtitle: {
text: 'Prices'
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 0,
layout: 'vertical',
verticalAlign: 'top',
y: 0,
x: -140,
shadow: false,
floating : true
},
xAxis: {
title: {
text: 'Date/Time'
}
},
yAxis: [{
title: {
text: 'Rank'
},
height: 200,
lineWidth: 2,
opposite:false
}, {
title: {
text: 'Price'
},
top: 300,
height: 200,
offset: 0,
lineWidth: 2,
opposite:false
}],
navigator: {
enabled: false,
},
credits: {
enabled: false
},
series: [{
name: 'Rank',
color: '#4572A7',
type: 'spline',
yAxis: 0,
marker: {
enabled:true,
radius:2
},
tooltip: {
valueDecimals : 0
},
data: dataRank,
}, {
name: 'Price',
color: '#89A54E',
type: 'spline',
yAxis: 1,
marker: {
enabled:true,
radius:2
},
tooltip: {
valueSuffix: '$',
valueDecimals : 0
},
data: dataSeries,
}]
};
chart = new Highcharts.StockChart(dataChart);
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: new google.maps.LatLng(0.0, 0.0),
mapTypeId : google.maps.MapTypeId.ROADMAP, // Type de carte, diff�rentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN
streetViewControl: false,
center: centerMap,
panControl: false,
zoomControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
});
var inputLocation = /** @type {HTMLInputElement} */(document.getElementById('search-city'));
// Link it to the UI element.
// map.controls[google.maps.ControlPosition.TOP_LEFT].push(inputLocation);
var autocompleteLocation = new google.maps.places.Autocomplete(inputLocation);
autocompleteLocation.bindTo('bounds', map);
/******************** LISTENER ************************/
google.maps.event.addListener(autocompleteLocation, 'place_changed', function() {
inputLocation.className = '';
var placeStart = autocompleteLocation.getPlace();
if (!placeStart.geometry) {
// Inform the user that the place was not found and return.
inputLocation.className = 'notfound';
return;
}
// If the place has a geometry, then present it on a map.
if (placeStart.geometry.viewport) {
map.fitBounds(placeStart.geometry.viewport);
} else {
map.setCenter(placeStart.geometry.location);
map.setZoom(13); // Why 13? Because it looks good.
}
var address = '';
if (placeStart.address_components) {
address = [
(placeStart.address_components[0] && placeStart.address_components[0].short_name || ''),
(placeStart.address_components[1] && placeStart.address_components[1].short_name || ''),
(placeStart.address_components[2] && placeStart.address_components[2].short_name || '')
].join(' ');
}
});
/******************** END LISTENER ************************/
var marker, i;
var markers = [];
var contentDiv = '<center><h2>Price and Rank Evolution</h2></center><div id="container" class="info-box"></div>';
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][3], locations[i][4]),
map: map,
title: locations[i][1]+ " (" + locations[i][2] + " stars)"
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (
function(marker, i) {
return function() {
selectedname = locations[i][1];
stopAnimation(marker);
var requestR = $.ajax({
url: "../ajax/map/get-rank.php",
type: "POST",
dataType: "json",
data: { HotelId: locations[i][0] }
});
var requestS = $.ajax({
url: "../ajax/map/get-prices.php",
type: "POST",
dataType: "json",
data: { HotelId: locations[i][0] }
});
requestR.done(
requestS.done(
function(dataS, dataR, textStatus, jqXHR) {
dataRank=dataR;
dataSeries=dataS;
iw.setContent(contentDiv);
iw.open(map, marker);
}));
requestS.fail(function(jqXHR, textStatus, errorThrown) {});
return false;
}
}
)
(marker, i)
);
}
var markerCluster = new MarkerClusterer(map, markers);
google.maps.event.addListener(iw, 'closeclick', function() {});
function stopAnimation(marker) {
setTimeout(function () {
marker.setAnimation(null);
}, 3000);
}
});
</script>
我的JSON php文件
<?php
header("Content-type: application/json");
include('../../db.php');
if (isset($_POST['HotelId'])) $res_idHotel=$_POST['HotelId'];
$query = $bdd->prepare("SELECT res_date, res_price ".
"FROM exp_result ".
"WHERE res_idHotel = $res_idHotel ".
"AND res_date ".
//"BETWEEN DATE( DATE_SUB( NOW() , INTERVAL 7 DAY ) ) ".
//"AND DATE ( NOW() ) ".
"GROUP BY res_date ORDER BY res_date;");
$query->execute();
$data = $query->fetch();
if ($data) {
echo "[ ";
do {
echo "[ \"".$data['res_date']."\", ".$data['res_price']." ]";
$data = $query->fetch();
if ($data) echo ",";
} while ($data);
echo "]";
} else {
echo "[]";
}
$query->closeCursor();
?>
和
<?php
header("Content-type: application/json");
include('../../db.php');
if (isset($_POST['HotelId'])) $res_idHotel=$_POST['HotelId'];
$query = $bdd->prepare("SELECT res_date, res_rank ".
"FROM exp_result ".
"WHERE res_idHotel = $res_idHotel ".
"AND res_date ".
//"BETWEEN DATE( DATE_SUB( NOW() , INTERVAL 7 DAY ) ) ".
//"AND DATE ( NOW() ) ".
"GROUP BY res_date ORDER BY res_date;");
$query->execute();
$dataR = $query->fetch();
if ($dataR) {
echo "[ ";
do {
echo "[ \"".$dataR['res_date']."\", ".$dataR['res_rank']." ]";
$dataR = $query->fetch();
if ($dataR) echo ",";
} while ($dataR);
echo "]";
} else {
echo "[]";
}
$query->closeCursor();
?>