Highcharts製做疫情地圖
目前圖表是大熱門，因此趁着這段休假時間試試用highcharts製做了一個疫情地圖，數據來源於http://garnetcdn.migu.cn/lovebridge.htmlcss
- 進入highcharts官網，進入文檔教程》API文檔》highmaps，裏面是相關資料
- 以下是body頁面及css樣式及引入的相關文件
<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>
<!-- 引入文件 -->
<script src="jquery-3.4.1.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.45rem 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;">國內病例</h1>
<div class="table">
<div class="head row">
<div>省區市</div>
<div>確診(例)</div>
<div>疑似(例)</div>
<div>出院(例)</div>
<div>死亡(例)</div>
</div>
<script type="text/html" id="tpl">
//$data表明當前的數組，根據數組循環，此名字不能改變
{{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>
複製代碼
- 首先經過ajax獲取數據，我將它封裝成了promise對象，命名爲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)
}
}
}
})
}
複製代碼
- 將網站上獲得的數據轉爲highcharts須要的格式,能夠經過以下代碼轉換成須要的格式，由於highcharts中須要傳的參數名是data，因此直接將轉換成的數組命名爲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]) })
});
}
// 調用
aa()
複製代碼
-
能夠在highcharts中查看相似的實例，將代碼及須要的文件複製過來，而後根據要求修改代碼,目前還有幾處缺點未找到方法，但願有大佬能提供指點html
- 地圖上內蒙古的文字超出了地圖的範圍
- 地圖上的字體沒有根據數量的大小而改變顏色
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: '新型冠狀病毒感染的肺炎疫情最新狀況',
y: 45,
floating: true,
style: {
'fontWeight': 'bold',
'font-size': '46px',
}
},
// 圖例
legend: {
itemStyle: {
'fontSize': '20px',
},
align: 'left',
verticalAlign: 'bottom',
layout: 'vertical',
valueDecimals: 0,//圖例的小數點
// 圖例默認是圓形的，經過設置以下參數改成長方形，相應文檔能夠查看legend目錄
symbolRadius: 0,
symbolWidth: 45,
symbolHeight: 20,
itemMarginTop: 10,
squareSymbol: false,
y: -150,
// 經過設置symbolPadding調節圖例左邊長方形和右邊文字的間距
symbolPadding: 30
},
// 地圖放大功能
mapNavigation: {
enableMouseWheelZoom: true,
// 經過設置enabled可使地圖具備放大功能
enabled: true,
buttonOptions: {
//點擊放大的按鈕顯示的位置
verticalAlign: 'bottom'
}
},
//數據範圍顯示，且顯示相應的顏色
colorAxis: {
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',
}],
},
//滑過顯示的數據
tooltip: {
// headerFormat是默認的有顯示的格式，因此將它改成空字符串不顯示
headerFormat: '',
pointFormat: '{point.name}<br/>確診 {point.value} 例',
backgroundColor: 'rgba(0,0,0,.5)',
borderColor: 'null',
borderRadius: '10',
style: {
'color': '#fff',
'fontSize': '26px',
}
},
series: [{
data: data,
borderColor: '#fff',
borderWidth: 1.2,
cursor: 'pointer',
dataLabels: {
overflow: 'none',
crop: 'false',
align: 'center',
//enabled爲true才能顯示地圖上你須要顯示的數據
enabled: true,
//將字體顏色設置爲黑色，我是想按數量顯示不一樣的顏色，可是目前未找到方法
color: '#000',
//顯示數據的格式
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: '中國地圖'
}]
});
});
複製代碼
- 我在頁面上作了一個統計數據的表格，經過art-template模板引擎減小代碼量
async function aa() {
let res = await bjax()
$('.table').append(template('tpl', res))
}
aa()
複製代碼
- 以下是全部的代碼
<!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>
<!-- 引入文件 -->
<script src="jquery-3.4.1.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.45rem 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;">國內病例</h1>
<div class="table">
<div class="head row">
<div>省區市</div>
<div>確診(例)</div>
<div>疑似(例)</div>
<div>出院(例)</div>
<div>死亡(例)</div>
</div>
<script type="text/html" id="tpl">
//$data表明當前的數組，根據數組循環，此名字不能改變
{{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>
//封裝ajax爲promise對象
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) {
resolve(JSON.parse(ajax.response).data.country[0].province)
}
}
}
})
}
//右邊table部分
async function aa() {
let res = await bjax()
$('.table').append(template('tpl', res))
}
aa()
//圖表部分
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: '新型冠狀病毒感染的肺炎疫情最新狀況',
y: 45,
floating: true,
style: {
'fontWeight': 'bold',
'font-size': '46px',
}
},
// 圖例
legend: {
itemStyle: {
'fontSize': '20px',
},
align: 'left',
verticalAlign: 'bottom',
layout: 'vertical',
valueDecimals: 0,//圖例的小數點
// 圖例默認是圓形的，經過設置以下參數改成長方形，相應文檔能夠查看legend目錄
symbolRadius: 0,
symbolWidth: 45,
symbolHeight: 20,
itemMarginTop: 10,
squareSymbol: false,
y: -150,
// 經過設置symbolPadding調節圖例左邊長方形和右邊文字的間距
symbolPadding: 30
},
// 地圖放大功能
mapNavigation: {
enableMouseWheelZoom: true,
// 經過設置enabled可使地圖具備放大功能
enabled: true,
buttonOptions: {
//點擊放大的按鈕顯示的位置
verticalAlign: 'bottom'
}
},
//數據範圍顯示，且顯示相應的顏色
colorAxis: {
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',
}],
},
//滑過顯示的數據
tooltip: {
// headerFormat是默認的有顯示的格式，因此將它改成空字符串不顯示
headerFormat: '',
pointFormat: '{point.name}<br/>確診 {point.value} 例',
backgroundColor: 'rgba(0,0,0,.5)',
borderColor: 'null',
borderRadius: '10',
style: {
'color': '#fff',
'fontSize': '26px',
}
},
series: [{
data: data,
borderColor: '#fff',
borderWidth: 1.2,
cursor: 'pointer',
dataLabels: {
overflow: 'none',
crop: 'false',
align: 'center',
//enabled爲true才能顯示地圖上你須要顯示的數據
enabled: true,
//將字體顏色設置爲黑色，我是想按數量顯示不一樣的顏色，可是目前未找到方法
color: '#000',
//顯示數據的格式
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: '中國地圖'
}]
});
});
</script>
</html>
複製代碼
效果：jquery
相關文章
- 1. echart製做省市疫情地圖
- 2. JS+Antv G2製做疫情地圖
- 3. 縣市疫情分佈地圖製做
- 4. Python 製做全國疫情地圖
- 5. ArcMap製作疫情地圖
- 6. 2019ncov疫情地圖
- 7. 如何製作疫情民生地圖
- 8. 繪製2019-nCoV動態疫情地圖
- 9. Echarts製做一張全球疫情圖
- 10. 疫情數據地圖
- 更多相關文章...
- • 物理地址（MAC地址）是什麼？ - TCP/IP教程
- • R 繪圖 - 餅圖 - R 語言教程
- • 漫談MySQL的鎖機制
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. echart製做省市疫情地圖
- 2. JS+Antv G2製做疫情地圖
- 3. 縣市疫情分佈地圖製做
- 4. Python 製做全國疫情地圖
- 5. ArcMap製作疫情地圖
- 6. 2019ncov疫情地圖
- 7. 如何製作疫情民生地圖
- 8. 繪製2019-nCoV動態疫情地圖
- 9. Echarts製做一張全球疫情圖
- 10. 疫情數據地圖