highmap 中国地图，highchart与highmap冲突解决方法

已于 2022-04-21 13:48:30 修改
阅读量1.9k 收藏 3
点赞数 1
分类专栏： 前端 highMap 文章标签： javascript
于 2019-02-25 17:13:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29207823/article/details/87919973
版权 
<!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://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
<script src="https://data.jianshukeji.com/geochina/china.js"></script>
<script>
    // 随机数据
    var data = [{"name":"北京","value":1},{"name":"天津","value":2},{"name":"河北","value":3},{"name":"山西","value":4},{"name":"内蒙古","value":5},{"name":"辽宁","value":0},{"name":"吉林","value":0},{"name":"黑龙江","value":6},{"name":"上海","value":0},{"name":"江苏","value":0},{"name":"浙江","value":0},{"name":"安徽","value":0},{"name":"福建","value":0},{"name":"江西","value":0},{"name":"山东","value":0},{"name":"河南","value":0},{"name":"湖北","value":0},{"name":"湖南","value":0},{"name":"广东","value":0},{"name":"广西","value":0},{"name":"海南","value":0},{"name":"重庆","value":0},{"name":"四川","value":0},{"name":"贵州","value":0},{"name":"云南","value":0},{"name":"西藏","value":0},{"name":"陕西","value":0},{"name":"甘肃","value":0},{"name":"青海","value":0},{"name":"宁夏","value":0},{"name":"新疆","value":0},{"name":"台湾","value":0},{"name":"香港","value":0},{"name":"澳门","value":0},{"name":"南海诸岛","value":0},{"name":"南海诸岛","value":0}];
	
	$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function(mapdata) {
		var map = new Highcharts.Map('map', {
		mapNavigation: {   
			enabled: true,  //设置缩放图标的显示隐藏
			buttonOptions: {
				verticalAlign: 'bottom'  //设置缩放图标的位置
			}
		},
		title: {
			text: '中国地图'
		},
		color: "red",
		colorAxis: {
			min: 0,
			minColor: 'rgb(255,255,255)',
			maxColor: '#006cee'
			
		},
		series: [{
			data: data,
			mapData: mapdata,
			joinBy: 'name',
			name: '中国地图',
		}],
		plotOptions: {
			map: {
				states: {
				 hover: {
					color: "#FEB41C"  //鼠标hover时，显示特定颜色
					}
				}
			}
		},
		legend: {
			enabled: false  //设置下方颜色指示图标的显示隐藏
		},
		credits: { enabled: false }//设置highcharts站点标志的显示隐藏
	});	
	});	

</script>
</body>
</html>

如图：

注意：若highchart.js与highmap.js冲突，可以用

<script src="/bower_components/highcharts/modules/map.js"></script>

来代替

<script src="/bower_components/highcharts/highmaps.js"></script>
哈哈哦0
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Highmaps全国、省、市三级JSON格式数据（亲测可用）
11-14
Highmaps 是一款基于 HTML5 的优秀地图组件。Highmaps 继承了 Highcharts 简单易用的特性，利用它可以方便快捷的创建用于展现销售、选举结果等其他与地理位置关系密切的交互性地图图表。Highmaps 还接受标准的 GeoJson 标准的地图数据格式。本资源提供全国、省和市三级的标准的GeoJson地理数据格式。
HighMaps JS地图插件
08-21
功能最强大的JS地图插件，支持按地域统计数据等等
高级地图图表库：Highcharts China Geo
最新发布
gitblog_00014的博客
04-23 399
高级地图图表库：Highcharts China Geo 项目地址:https://gitcode.com/natee/highcharts-china-geo 如果你在寻找一个强大的JavaScript图表库，特别是用于展示中国地理数据的可视化工具，那么Highcharts China Geo项目绝对值得关注。这个开源项目是基于Highcharts库的扩展，专门针对中国的省份和城市进行了深度定制...
Highmaps网页图表教程之绘图区显示标签显示数据标签定位
08-26 146
Highmaps网页图表教程之绘图区显示标签显示数据标签定位 Highmaps数据标签定位 由于数据标签是和节点一一对应，所以数据标签是依据节点位置进行定位的。本节详细讲解如何对数据标签进行定位。 ...
highMap echartsMap在可视化项目中的快速集成
weixin_40073115的博客
12-10 311
可视化项目中开源map最为流行的两个js库就是highMap 和echartsMap， 国内用的最多的是后者，本篇博文就这两个库的使用技术点做一总结 先上效果图 hightMap echartsMap 1.highMap 与echartsMap比较 2.highMap 与echartsMap安装 highMap highmap ：可从官方网站直接下载组件到本地文档中以或npm 安装 np...
一分钟教程：绘制中国地图
一个被程序耽误的作家的博客
12-26 5119
——程序员今晚不回家（抖音号） 相信很多人可能和我有着一样的感觉，总感觉这两年像是在做梦，终日为生活忙忙碌碌，但却感觉不到充实。想分享点正能量的事情吧，但网上看到的要不是这明星出轨了，要不就是这直播怎么了。哎，想来想去，算了，还是来学习吧。学习使人明智，学习使人快乐！ 1、第一种是使用highcharts中的Highmaps绘制地图。 Highcharts 是一个用纯 JavaScript 编写的一个图表库，可以用来绘制直线图、曲线图、区域图、柱状图等20多种图表。这里我们用其中的Hi...
Highmaps网页图表教程之数据标签与标签文本
08-17 150
Highmaps网页图表教程之数据标签与标签文本 Highmaps数据标签 数据标签用于在地图图表上展现节点对应的数据。数据标签展现数据是静态的，只要节点一加载，数据标签就会出现在节点附近。在Hig...
highchart下的地图下钻
02-24
index页面展示效果，使用highchart的地图下钻，地方是广西，每个市都是对应的饼图数据统计。市级可以下钻到县。 在js文件夹中有china.js（之前echart的全国地图数据），广西的地图json数据
highchart.rar
04-04
在这个名为"highchart.rar"的压缩包中，我们很显然会找到与Highcharts相关的代码示例，尤其是关于如何实现Y轴双数据的设置。 在Web开发中，数据可视化是一个至关重要的环节，它能够帮助用户更好地理解复杂的数据...
echarts和highcharts全国及各省市地图
04-20
【标题】"echarts和highcharts全国及各省市地图"涉及的是两个主流的JavaScript数据可视化库——ECharts和Highcharts，它们在中国地图的绘制方面提供了广泛的支持。这两款工具可以帮助开发者将复杂的数据转换为易于...
HighChart API
12-09
10. **模块化**：HighChart提供了一些额外的模块，如地图、热力图、3D图表等，可以按需加载。 HighChart API文档详尽且结构清晰，便于开发者查找和理解各项功能。无论是初学者还是经验丰富的开发者，都能从中找到所...
HighChart曲线图
06-18
8. **优化与性能**：在实际应用中，需要注意图表的性能优化，例如减少数据点的数量、使用数据列渲染而非线条渲染等方法，以确保在大数据量时依然保持良好的用户体验。 通过以上知识点，我们可以理解如何使用...
使用highcharts做地图统计
lerleelym的博客
08-30 812
highcharts 接入地图的坑
【highcharts】highcharts(highmaps)实现疫情地图（一看就会篇）
热门推荐
GengMS的博客
03-27 3万+
【highcharts】highcharts(highmaps)实现疫情地图 有人可能问为什么不用echarts，echarts简单容易上手啊，因为echarts他官网没有地图数据的下载地址需要自己上网搜比较麻烦，并且highcharts官网有全世界的地图，大到世界地图小到世界各地市区地图，都是比较全的，后期加个下钻功能也是比较方便容易的。 一，highcharts使用介绍 Highchart...
vue + highmap自定义中国地图组件
浮云只想听你说的博客
05-28 1638
完成一个中国地图的组件 运用了highcharts highmap jsonp map组件 <template> <div ref="map"></div> </template> // javascript import $ from 'jsonp' import Highcharts from 'highcharts' import H...
highcharts插件使用总结和开发中遇到的问题及解决办法
Elina_1992的专栏
11-11 1314
highcharts插件使用总结和开发中遇到的问题及解决办法： 关键词：highcharts 插件 使用 总结 开发 中 遇到 问题 解决办法 在js p中使用highchart的步骤： 第一步：引入highchart必需的js 文件<! -- jquery 的js 要在引入highchart插件的js 之前引入 --> <script src="<%=basepath%>js /high
小白瞎搞--Highcharts图表显示不出来？可是是双引号的锅！
GTW、Zeus的博客
05-25 891
明明后台查询到的数据是符合highcharts的要求，但是图表却无法显示？ 先打开浏览器的开发者模式，看看传的json格式和对应的图表要的data是否真的一致。 有可能写js代码的时候漏写括号等等 来看个实例： series: [{ //仔细观察以后，我们可以发现 name: 'Brands', colorByPoint: true, data: [{ name: 'Chrome', y: 61.41, sliced: true, selected: true
使用highEcharts做出中国地图的效果图
weixin_43709908的博客
08-05 1696
直接上代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <
在同一个页面使用highcharts,highstock,highmap
fengxinzi1111的专栏
08-15 4581
不知道有没有人发现一个问题，使用highcharts
highchart xaxis 时间
06-11
如果您想在 Highcharts 的 x 轴上显示时间，您可以使用 `datetime` 类型的坐标轴，并使用 `Date.UTC()` 函数将时间转换为 UTC 时间戳。 以下是一个例子： ```javascript Highcharts.chart('container', { xAxis: { type: 'datetime' }, series: [{ data: [ [Date.UTC(2021, 0, 1), 10], [Date.UTC(2021, 0, 2), 20], [Date.UTC(2021, 0, 3), 15], [Date.UTC(2021, 0, 4), 25] ] }] }); ``` 在这个例子中，`xAxis` 的类型被设置为 `datetime`，因此 Highcharts 会自动将 x 坐标轴解释为时间轴。然后，数据点使用 `Date.UTC()` 函数来指定时间和数据值。 希望这可以帮助您！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值