when using highcharts"s provincial map, the sample import downloaded from the official website is as follows (Shandong Province as an example):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body><div id="map" style="width:800px;height: 500px;"></div>
<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
<script src="https://data.jianshukeji.com/geochina/shandong.js"></script>
<!-- <script src="./shandong.js"></script> -->
<script>
//
var data = [{"name":"","value":78},{"name":"","value":94},{"name":"","value":36},{"name":"","value":53},{"name":"","value":64},{"name":"","value":14},{"name":"","value":34},{"name":"","value":26},{"name":"","value":15},{"name":"","value":3},{"name":"","value":30},{"name":"","value":9},{"name":"","value":66},{"name":"","value":93},{"name":"","value":48},{"name":"","value":67},{"name":"","value":8}];
//
var map = new Highcharts.Map("map", {
title: {
text: ""
},
colorAxis: {
min: 0,
minColor: "rgb(255,255,255)",
maxColor: "-sharp006cee"
},
series: [{
data: data,
name: "",
mapData: Highcharts.maps["cn/shandong"],
joinBy: "name" // name
}]
});
</script></body></html>
I put
<script src="https://data.jianshukeji.com/geochina/shandong.js"></script>
Change the statement to
<script src="./shandong.js"></script> // ./shandong.jshttps://data.jianshukeji.com/geochina/shandong.js
as a result, the map data can not be displayed:
Why doesn"t the map display properly after I copy the contents of the link on the web page to the local area?