我的目标是在 Mapbox 弹出窗口中显示两个小的 Highchart 折线图(高度:100 像素；)。我在 HTML 中有两个 div 来保存图表，如下图所示，这似乎是图表，因为轴显示得很好。
令我困惑的是系列和标记没有显示，除了被 y 轴分割的第一个标记的一半。在 Chrome 中检查 Highchart 元素时，标记和系列的所有路径似乎都位于正确的位置，并标记为 visibility="visible"。
有没有人遇到过类似的问题？
更新:现场演示 - http://jsfiddle.net/calanoue/tf95sLsu/
<head lang="en">
<title></title>
</head>
<body>
<div id='map'></div>
<script>
...
</script>
</body>
最佳答案
我尝试了这个解决方案，可能会对你有所帮助， JSFiddle
HTML:
<head lang="en">
<title></title>
</head>
<body>
<div id='map'></div>
</body>
CSS:
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.sparkline {
height: 100px;
width: 200px;
}
jQuery:
L.mapbox.accessToken = 'pk.eyJ1IjoibmF1dGlseXRpY3MiLCJhIjoidG5tdktlMCJ9.Ktr2w0QzGrAN2UNtrJJziw';
var map = L.mapbox.map('map', 'nautilytics.icjmd18i').setView([37.8, -96], 4);
var myLayer = L.mapbox.featureLayer().addTo(map);
var portGeoJSON = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.0047538280487, 40.7590498275021]
},
"properties": {
"title": "NEW YORK",
"est_value": 13639833,
"marker-color": "#0000ff",
"marker-size": "medium",
"marker-symbol": "harbor"
}
}]
};
var lineChartOptions = {
title: {
text: null
},
legend: {
enabled: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
tooltip: {
backgroundColor: {
linearGradient: [0, 0, 0, 60],
stops: [
[0, '#FFFFFF'],
[1, '#E0E0E0']
]
},
borderWidth: 1,
useHTML: true,
borderColor: '#AAA'
},
yAxis: {
min: 0,
lineWidth: 1,
tickWidth: 1,
title: {
text: null
},
labels: {
style: {
'fontSize': '10px'
}
}
},
xAxis: {
type: 'datetime',
labels: {
style: {
'fontSize': '10px'
}
}
},
plotOptions: {
series: {
cursor: 'pointer',
connectNulls: false
}
}
};
myLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
lineChartOptions.tooltip.formatter = function() {
var y = "$" + this.y;
return '<center>' + Highcharts.dateFormat('%b \'%y', new Date(this.x)) + '</center></b><center><b>' + y + '</b></center>';
};
lineChartOptions.series = [{
pointInterval: 24 * 3600 * 1000 * 30.41667,
pointStart: 1393632000000,
data: [
58044, 60871, 29738, null, 804997, 628727, 20678, null,
100606, 122195, 981459, 39840]
}];
// HTML content for pop-up
var popupContent = '<div id="popup_template">' +
'<div class="port_header marker-title">' +e.layer.feature.properties.title.toUpperCase() +'</div>' +
'<div class="est_value marker-title">'+
'Est. Value: $' + e.layer.feature.properties.est_value
+'</div>' +
'<div id="est_value_sparkline" class="sparkline"></div>';
var container = $('<div id="popup_template"/>');
container.html( '<div class="port_header marker-title">' +e.layer.feature.properties.title.toUpperCase() +'</div>' +
'<div class="est_value marker-title">'+
'Est. Value: $' + e.layer.feature.properties.est_value
+'</div>' +
'<div id="est_value_sparkline" class="sparkline"></div>');
// Delegate all event handling for the container itself and its contents to the container
container.find('#est_value_sparkline').highcharts(lineChartOptions);
marker.bindPopup(container[0]);
});
myLayer.setGeoJSON(portGeoJSON);
关于javascript - 在 Mapbox 标记弹出窗口中显示 Highchart 折线图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28722889/