Current chart is hot, so during this period of vacation time try highcharts made a epidemic maps, data from http://garnetcdn.migu.cn/lovebridge.html
- Go to the Official website of HighCharts and enter the Documentation Tutorial API Documentation highMaps, which contains relevant information
- Here is the body page with the CSS styles and related files introduced
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <! -- Import file --> <script SRC ="Jquery - 3.4.1 track. Min. Js"></script>
<script src="highmaps.js"></script>
<script src="exporting.js"></script>
<script src="drilldown.js"></script>
<script src="art-template.js"></script>
<style>
body {
background-color: #fdf9fc;
}
#container {
margin-top: 100px;
width: 50vw;
height: 90vh;
}
h1 {
font-weight: 700;
padding: .1rem;
font-size: 40px;
}
.table {
padding: 40px 20px;
width: 29vw;
font-size: 26px;
text-align: center;
background-color: #fff;Box-shadow: 0 0.08rem 0.45 REM 0 Rgba (221, 221, 238,.69); } .table .head { color:#9b9b9b;
}
.table>.tbody:nth-child(2n+1) {
background-color: #f6f6f8;
}
.table .row {
padding: 15px 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
</style>
</head>
<body>
<div class="box" style="display: flex; justify-content: space-around">
<div id="container"></div>
<div class="right">
<h1 style="text-align: center; height: 50px; line-height: 50px;"> Domestic cases </h1> <div class="table">
<div class="head row"> < div > provincial < / div > < div > confirmed () < / div > < div > suspected () < / div > < div > discharge () < / div > < div > death () < / div > < / div > < scripttype="text/html" id="tpl">
//$dataRepresents the current array. According to the array loop, this name cannot be changed {{each$data item index}}
<div class="tbody row">
<div style='font-weight:700'>{{item.na}}</div>
<div>{{item.tn.split(', ')[0]}}</div>
<div>{{item.tn.split(', ')[1]}}</div>
<div>{{item.tn.split(', ')[2]}}</div>
<div>{{item.tn.split(', ')[3]}}</div>
</div>
{{/each}}
</script>
</div>
</div>
</div>
</body>
Copy the code- First I get the data via Ajax, which I encapsulate as a Promise object named bJAX:
function bjax() {
return new Promise((resolve, reject) => {
let ajax = new XMLHttpRequest()
ajax.open('GET'.'http://lovebridge.migu.cn:18188/api/map?url=http:%2F%2Fgarnetcdn.migu.cn%2Flovebridge.html'.'true')
ajax.send()
ajax.onreadystatechange = function (r) {
if (ajax.readyState === 4) {
if (ajax.status === 200) {
// console.log(JSON.parse(ajax.response))
resolve(JSON.parse(ajax.response).data.country[0].province)
}
}
}
})
}
Copy the code- To convert the data obtained on the website into the format required by HighCharts, the following code can be used to convert the data into the required format. Since the parameter name to be passed in HighCharts is Data, the array converted is directly named data:
async function aa (mapdata) {
let res = await bjax()
let data = []
res.forEach(item => {
data.push({ name: item.na, value: parseInt(item.tn.split(', ') [0])})}); } // call aa()Copy the code-
You can view similar examples in HighCharts, copy the code and the required files, and modify the code according to the requirements. Currently, there are still several shortcomings that have not been found, and I hope you can provide guidance
- The words of Inner Mongolia on the map are out of bounds
- The font on the map does not change color according to the size of the quantity
var map = null;
$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', async function (mapdata) {
let res = await bjax()
let data = []
res.forEach(item => {
data.push({ name: item.na, value: parseInt(item.tn.split(', ') [0])})}); map = new Highcharts.Map('container', {// title: {text:'Update on pneumonia in novel Coronavirus Infections',
y: 45,
floating: true,
style: {
'fontWeight': 'bold'.'font-size': '46px'}}, // Legend: {itemStyle: {'fontSize': '20px',
},
align: 'left',
verticalAlign: 'bottom',
layout: 'vertical', valueDecimals: 0,// Legend's decimal point // Legend's default is round. By setting the following parameters to a rectangle, you can view the legend directory symbolRadius: 0, symbolWidth: 45, symbolHeight: 20, itemMarginTop: 10, squareSymbol:false, y: -150, // adjust the spacing between the left rectangle and the right text of the symbolPadding by setting symbolPadding: 30}, // map magnification mapNavigation: {enableMouseWheelZoom: true// The map can be enlarged by setting enabled:true, buttonOptions: {// Click the enlarged button to display the position verticalAlign:'bottom'}}, {dataClasses: [{to: 1, color:'#d6d6d6',
}, {
from: 1,
to: 9,
color: '#f2ab9a',
}, {
from: 9,
to: 99,
color: '#f96c4e',
}, {
from: 99,
to: 999,
color: '#f13c10',
}, {
from: 999,
color: '#500b00'}],}, // Slide over the displayed data Tooltip: {// headerFormat is the default displayed format, so change it to an empty string without displaying headerFormat:' ',
pointFormat: '{point.name}
Diagnose {point.value} case ',
backgroundColor: 'rgba(0,0,0,.5)',
borderColor: 'null',
borderRadius: '10',
style: {
'color': '#fff'.'fontSize': '26px',
}
},
series: [{
data: data,
borderColor: '#fff'And borderWidth: 1.2, cursor:'pointer',
dataLabels: {
overflow: 'none',
crop: 'false',
align: 'center'/ / enabled fortrueTo display the data you need to display on the map enabled:true// Set the font color to black. I want to display different colors by quantity, but I can't find the method color:'# 000'// Display data format:'{point.name}<br/>{point.value}',
style: {
'fontSize': '16px'.'text-align': 'center'."textOutline": "0px 0px contrast"}, // States: {hover: {color:'#fce2db'
}
},
mapData: mapdata,
joinBy: 'name',
name: 'Map of China'}}]); });Copy the code- I made a table of statistics on the page and used the Art-Template template engine to reduce the amount of code
async function aa() {
let res = await bjax()
$('.table').append(template('tpl', res))
}
aa()
Copy the code- Here is all the code
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <! -- Import file --> <script SRC ="Jquery - 3.4.1 track. Min. Js"></script>
<script src="highmaps.js"></script>
<script src="exporting.js"></script>
<script src="drilldown.js"></script>
<script src="art-template.js"></script>
<style>
body {
background-color: #fdf9fc;
}
#container {
margin-top: 100px;
width: 50vw;
height: 90vh;
}
h1 {
font-weight: 700;
padding: .1rem;
font-size: 40px;
}
.table {
padding: 40px 20px;
width: 29vw;
font-size: 26px;
text-align: center;
background-color: #fff;Box-shadow: 0 0.08rem 0.45 REM 0 Rgba (221, 221, 238,.69); } .table .head { color:#9b9b9b;
}
.table>.tbody:nth-child(2n+1) {
background-color: #f6f6f8;
}
.table .row {
padding: 15px 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
</style>
</head>
<body>
<div class="box" style="display: flex; justify-content: space-around">
<div id="container"></div>
<div class="right">
<h1 style="text-align: center; height: 50px; line-height: 50px;"> Domestic cases </h1> <div class="table">
<div class="head row"> < div > provincial < / div > < div > confirmed () < / div > < div > suspected () < / div > < div > discharge () < / div > < div > death () < / div > < / div > < scripttype="text/html" id="tpl">
//$dataRepresents the current array. According to the array loop, this name cannot be changed {{each$data item index}}
<div class="tbody row">
<div style='font-weight:700'>{{item.na}}</div>
<div>{{item.tn.split(', ')[0]}}</div>
<div>{{item.tn.split(', ')[1]}}</div>
<div>{{item.tn.split(', ')[2]}}</div>
<div>{{item.tn.split(', ') [3]}} < / div > < / div > {{/ each}} < / script > < / div > < / div > < / div > < / body > < script > / / encapsulation ajax as the object of promisefunction bjax() {
return new Promise((resolve, reject) => {
let ajax = new XMLHttpRequest()
ajax.open('GET'.'http://lovebridge.migu.cn:18188/api/map?url=http:%2F%2Fgarnetcdn.migu.cn%2Flovebridge.html'.'true')
ajax.send()
ajax.onreadystatechange = function (r) {
if (ajax.readyState === 4) {
ifResolve (json.parse (ajax.response).data.country[0].province)}}}})function aa() {
let res = await bjax()
$('.table').append(template('tpl'Var map = null; $.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', async function (mapdata) {
let res = await bjax()
let data = []
res.forEach(item => {
data.push({ name: item.na, value: parseInt(item.tn.split(', ') [0])})}); map = new Highcharts.Map('container', {// title: {text:'Update on pneumonia in novel Coronavirus Infections',
y: 45,
floating: true,
style: {
'fontWeight': 'bold'.'font-size': '46px'}}, // Legend: {itemStyle: {'fontSize': '20px',
},
align: 'left',
verticalAlign: 'bottom',
layout: 'vertical',
floating:true, valueDecimals: 0,// Legend's decimal point // Legend's default is round. By setting the following parameters to a rectangle, you can view the legend directory symbolRadius: 0, symbolWidth: 45, symbolHeight: 20, itemMarginTop: 10, squareSymbol:false, y: -150, // adjust the spacing between the left rectangle and the right text of the symbolPadding by setting symbolPadding: 30}, // map magnification mapNavigation: {enableMouseWheelZoom: true// The map can be enlarged by setting enabled:true, buttonOptions: {// Click the enlarged button to display the position verticalAlign:'bottom'}}, {dataClasses: [{to: 1, color:'#d6d6d6',
}, {
from: 1,
to: 9,
color: '#f2ab9a',
}, {
from: 9,
to: 99,
color: '#f96c4e',
}, {
from: 99,
to: 999,
color: '#f13c10',
}, {
from: 999,
color: '#500b00'}],}, // Slide over the displayed data Tooltip: {// headerFormat is the default displayed format, so change it to an empty string without displaying headerFormat:' ',
pointFormat: '{point.name}
Diagnose {point.value} case ',
backgroundColor: 'rgba(0,0,0,.5)',
borderColor: 'null',
borderRadius: '10',
style: {
'color': '#fff'.'fontSize': '26px',
}
},
series: [{
data: data,
borderColor: '#fff'And borderWidth: 1.2, cursor:'pointer',
dataLabels: {
overflow: 'none',
crop: 'false',
align: 'center'/ / enabled fortrueTo display the data you need to display on the map enabled:true// Set the font color to black. I want to display different colors by quantity, but I can't find the method color:'# 000'// Display data format:'{point.name}<br/>{point.value}',
style: {
'fontSize': '16px'.'text-align': 'center'."textOutline": "0px 0px contrast"}, // States: {hover: {color:'#fce2db'
}
},
mapData: mapdata,
joinBy: 'name',
name: 'Map of China'}}]); }); </script> </html>Copy the codeEffect:
