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. Window下Ribbit MQ安装
- 2. Linux下Redis安装及集群搭建
- 3. shiny搭建网站填坑战略
- 4. Mysql8.0.22安装与配置详细教程
- 5. Hadoop安装及配置
- 6. Python爬虫初学笔记
- 7. 部署LVS-Keepalived高可用集群
- 8. keepalived+mysql高可用集群
- 9. jenkins 公钥配置
- 10. HA实用详解
欢迎关注本站公众号,获取更多信息
相关文章
- 1. echart制做省市疫情地图
- 2. JS+Antv G2制做疫情地图
- 3. 县市疫情分布地图制做
- 4. Python 制做全国疫情地图
- 5. ArcMap制作疫情地图
- 6. 2019ncov疫情地图
- 7. 如何制作疫情民生地图
- 8. 绘制2019-nCoV动态疫情地图
- 9. Echarts制做一张全球疫情图
- 10. 疫情数据地图