【发布时间】：2019-08-07 17:08:10
【问题描述】：
我们已经在 web 应用程序中使用 highcharts。下载 highmaps，我们正在为同一应用程序实现 highmaps，我们的要求是美国地图应该根据纬度和经度值显示。我们浏览了下面的链接并实现了它并按预期工作，但在浏览器控制台中出现了一些脚本错误，它似乎 highmap.js 与 highchart.js 文件冲突。
var H = Highcharts,
map = H.maps['countries/us/us-all'],
chart;
// Add series with state capital bubbles
$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/us-capitals.json', function (json) {
var data = [];
$.each(json, function () {
this.z = this.population;
data.push(this);
});
chart = Highcharts.mapChart('container', {
title: {
text: 'Highmaps lat/lon demo'
},
tooltip: {
pointFormat: '{point.capital}, {point.parentState}<br>' +
'Lat: {point.lat}<br>' +
'Lon: {point.lon}<br>' +
'Population: {point.population}'
},
xAxis: {
crosshair: {
zIndex: 5,
dashStyle: 'dot',
snap: false,
color: 'gray'
}
},
yAxis: {
crosshair: {
zIndex: 5,
dashStyle: 'dot',
snap: false,
color: 'gray'
}
},
series: [{
name: 'Basemap',
mapData: map,
borderColor: '#606060',
nullColor: 'rgba(200, 200, 200, 0.2)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
data: H.geojson(map, 'mapline'),
color: '#101010',
enableMouseTracking: false,
showInLegend: false
}, {
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.capital}'
},
name: 'Cities',
data: data,
maxSize: '12%',
color: H.getOptions().colors[0]
}]
});
});
// Display custom label with lat/lon next to crosshairs
$('#container').mousemove(function (e) {
var position;
if (chart) {
if (!chart.lab) {
chart.lab = chart.renderer.text('', 0, 0)
.attr({
zIndex: 5
})
.css({
color: '#505050'
})
.add();
}
e = chart.pointer.normalize(e);
position = chart.fromPointToLatLon({
x: chart.xAxis[0].toValue(e.chartX),
y: chart.yAxis[0].toValue(e.chartY)
});
chart.lab.attr({
x: e.chartX + 5,
y: e.chartY - 22,
text: 'Lat: ' + position.lat.toFixed(2) + '<br>Lon: ' + position.lon.toFixed(2)
});
}
});
$('#container').mouseout(function () {
if (chart && chart.lab) {
chart.lab.destroy();
chart.lab = null;
}
});#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<div id="container"></div>这里是针对这个问题的 jsfiddler。
var H = Highcharts,
map = H.maps['countries/us/us-all'],
chart;
// Add series with state capital bubbles
$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/us-capitals.json', function (json) {
var data = [];
$.each(json, function () {
this.z = this.population;
data.push(this);
});
chart = Highcharts.mapChart('container', {
title: {
text: 'Highmaps lat/lon demo'
},
tooltip: {
pointFormat: '{point.capital}, {point.parentState}<br>' +
'Lat: {point.lat}<br>' +
'Lon: {point.lon}<br>' +
'Population: {point.population}'
},
xAxis: {
crosshair: {
zIndex: 5,
dashStyle: 'dot',
snap: false,
color: 'gray'
}
},
yAxis: {
crosshair: {
zIndex: 5,
dashStyle: 'dot',
snap: false,
color: 'gray'
}
},
series: [{
name: 'Basemap',
mapData: map,
borderColor: '#606060',
nullColor: 'rgba(200, 200, 200, 0.2)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
data: H.geojson(map, 'mapline'),
color: '#101010',
enableMouseTracking: false,
showInLegend: false
}, {
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.capital}'
},
name: 'Cities',
data: data,
maxSize: '12%',
color: H.getOptions().colors[0]
}]
});
});
// Display custom label with lat/lon next to crosshairs
$('#container').mousemove(function (e) {
var position;
if (chart) {
if (!chart.lab) {
chart.lab = chart.renderer.text('', 0, 0)
.attr({
zIndex: 5
})
.css({
color: '#505050'
})
.add();
}
e = chart.pointer.normalize(e);
position = chart.fromPointToLatLon({
x: chart.xAxis[0].toValue(e.chartX),
y: chart.yAxis[0].toValue(e.chartY)
});
chart.lab.attr({
x: e.chartX + 5,
y: e.chartY - 22,
text: 'Lat: ' + position.lat.toFixed(2) + '<br>Lon: ' + position.lon.toFixed(2)
});
}
});
$('#container').mouseout(function () {
if (chart && chart.lab) {
chart.lab.destroy();
chart.lab = null;
}
});#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<div id="container"></div>如果您删除 highchart.js 脚本引用，它将起作用并显示地图，但我们需要用于条形图等的 highchart.js 现有聊天功能对我们不起作用。
我们使用下面的 js 文件。 proj4.js highmaps.js us-all.js
我下载了 highmaps 文件并将 highmaps.js 、 proj4.js 和 us-all.js 添加到我的项目中并遇到了上述问题。
highchart 和 highmap 应该在同一个 Web 应用程序中工作。 js 文件不应冲突，且不应在控制台中显示任何脚本错误。
【问题讨论】：
标签： highcharts