- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我无法通过在后端应用程序提供的国家 iso 代码中着色来使世界地图正常工作。
我的代码是:
var chartData = [{
"name": "Africa",
"data": ["DZ", "AO", "BJ", "BW", "BF", "BI", "CM", "CV", "CF", "TD", "CD", "CG", "KM", "DJ", "EG", "GQ", "ER", "ET", "GM", "GA", "GH", "GN", "GW", "CI", "KE", "XK", "LS", "LR", "LY", "MG", "MW", "ML", "MR", "MU", "YT", "MA", "MZ", "NA", "NE", "NG", "RW", "ST", "SN", "SC", "SL", "SO", "ZA", "SS", "SD", "SZ", "TZ", "TG", "TN", "UG", "EH", "ZM", "ZW"]
}, {
"name": "Asia",
"data": ["AF", "BH", "BD", "BT", "BN", "KH", "CN", "HK", "IN", "ID", "IR", "IQ", "IL", "JP", "JO", "KZ", "KW", "KG", "LA", "LB", "MO", "MY", "MV", "MN", "MM", "NP", "KP", "OM", "PK", "PH", "WA", "SA", "SG", "KR", "LK", "SY", "TW", "TJ", "TH", "TR", "TM", "AE", "UZ", "VN", "PS", "YE"]
}, {
"name": "Europe",
"data": ["AL", "AD", "AM", "AT", "AZ", "BY", "BE", "BA", "BG", "HR", "CY", "CZ", "DK", "EE", "FO", "FI", "FR", "GE", "DE", "GR", "HU", "IS", "IE", "IM", "IT", "LV", "LI", "LT", "LU", "MK", "MT", "MD", "MC", "ME", "NL", "NO", "PL", "PT", "RO", "RU", "SM", "RS", "SK", "SI", "ES", "SE", "CH", "UA", "GB", "VA"]
}, {
"name": "North America",
"data": ["AI", "AR", "AW", "BS", "BB", "BZ", "BM", "BO", "BR", "CA", "KY", "CL", "CO", "CR", "CU", "CW", "DM", "DO", "EC", "SV", "PF", "GL", "GD", "GT", "GY", "HT", "HN"]
}, {
"name": "South America",
"data": ["JM", "MX", "FM", "NI", "PA", "PY", "PE", "PR", "KN", "LC", "VC", "MF", "SR", "TT", "TC", "US", "UY", "VE", "VI", "VG"]
}, {
"name": "Oceania",
"data": ["AS", "AU", "FJ", "GU", "KI", "MH", "NC", "NZ", "MP", "PW", "PG", "WS", "SB", "TP", "TO", "TV", "VU"]
}];
// Instantiate the map
Highcharts.mapChart('container', {
credits: {
enabled: false
},
chart: {
map: 'custom/world-highres',
spacingTop: 20,
spacingBottom: 20,
backgroundColor: '#DEEFF5'
},
title: {
text: 'Continents'
},
legend: {
enabled: true
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
// joinBy: 'hc-key',
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
states: {
hover: {
color: Highcharts.getOptions().colors[2]
}
},
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
series: chartData
});
我错过了什么?谢谢!
最佳答案
为了使您的代码正常工作,我修改了以下内容:
添加了 map custom/world.js
:
修改了您的系列数组,现在每个元素都是 {"code": ...}
:
变种数据= [];
对于(图表数据中的 var k){
数据推送({
名称:图表数据[k].名称,
数据:chartData[k].data.map(函数(代码){
返回{代码:代码};
})
});
}
这是更新的 jsfiddle:http://jsfiddle.net/beaver71/nccwpmen/
var chartData = [{
"name": "Africa",
"data": ["DZ", "AO", "BJ", "BW", "BF", "BI", "CM", "CV", "CF", "TD", "CD", "CG", "KM", "DJ", "EG", "GQ", "ER", "ET", "GM", "GA", "GH", "GN", "GW", "CI", "KE", "XK", "LS", "LR", "LY", "MG", "MW", "ML", "MR", "MU", "YT", "MA", "MZ", "NA", "NE", "NG", "RW", "ST", "SN", "SC", "SL", "SO", "ZA", "SS", "SD", "SZ", "TZ", "TG", "TN", "UG", "EH", "ZM", "ZW"]
}, {
"name": "Asia",
"data": ["AF", "BH", "BD", "BT", "BN", "KH", "CN", "HK", "IN", "ID", "IR", "IQ", "IL", "JP", "JO", "KZ", "KW", "KG", "LA", "LB", "MO", "MY", "MV", "MN", "MM", "NP", "KP", "OM", "PK", "PH", "WA", "SA", "SG", "KR", "LK", "SY", "TW", "TJ", "TH", "TR", "TM", "AE", "UZ", "VN", "PS", "YE"]
}, {
"name": "Europe",
"data": ["AL", "AD", "AM", "AT", "AZ", "BY", "BE", "BA", "BG", "HR", "CY", "CZ", "DK", "EE", "FO", "FI", "FR", "GE", "DE", "GR", "HU", "IS", "IE", "IM", "IT", "LV", "LI", "LT", "LU", "MK", "MT", "MD", "MC", "ME", "NL", "NO", "PL", "PT", "RO", "RU", "SM", "RS", "SK", "SI", "ES", "SE", "CH", "UA", "GB", "VA"]
}, {
"name": "North America",
"data": ["AI", "AR", "AW", "BS", "BB", "BZ", "BM", "BO", "BR", "CA", "KY", "CL", "CO", "CR", "CU", "CW", "DM", "DO", "EC", "SV", "PF", "GL", "GD", "GT", "GY", "HT", "HN"]
}, {
"name": "South America",
"data": ["JM", "MX", "FM", "NI", "PA", "PY", "PE", "PR", "KN", "LC", "VC", "MF", "SR", "TT", "TC", "US", "UY", "VE", "VI", "VG"]
}, {
"name": "Oceania",
"data": ["AS", "AU", "FJ", "GU", "KI", "MH", "NC", "NZ", "MP", "PW", "PG", "WS", "SB", "TP", "TO", "TV", "VU"]
}];
var data = [];
for (var k in chartData) {
data.push({
name: chartData[k].name,
data: chartData[k].data.map(function (code) {
return { code: code };
})
});
}
console.log(data);
// Instantiate the map
var chart = Highcharts.mapChart('container', {
credits: {
enabled: false
},
chart: {
map: 'custom/world',
spacingTop: 20,
spacingBottom: 20,
backgroundColor: '#DEEFF5'
},
title: {
text: 'Continents'
},
legend: {
enabled: true
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
allAreas: false,
joinBy: ['iso-a2', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
states: {
hover: {
color: Highcharts.getOptions().colors[2]
}
},
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
series: data
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div id="container"></div>
关于javascript - Highcharts Highmap world - 为一个大陆内的所有国家上色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48615112/
我正在显示带有分类区域的美国 map 。 map 运行良好,但我无法使用 Highmap 中的工具提示显示 Json 文件中的值。 这是我的代码: $.getJSON('../production/U
我正在使用higmaps来显示这样的数据类别: HighChart Code: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/h
我正在使用 Highmap 创建 map ,并希望在单击(或悬停) map 的一部分后用不同的图表显示数据。 这是示例(我不想使用 Google Spreadsheet 获取数据,我想使用 json
在使用 Highmap 时根据区域覆盖范围显示某种数据。我能够使用气泡图类型创建 map ,但我面临一个主要问题,对齐!每个气泡都与其所属的区域/路径对齐;基本上我有两个系列 s1: {id, z,
我正在使用 Highcharts Js 来显示 Highmaps map 气泡数据。但问题是图表没有在科索沃国家绘制泡沫。例如如果我有如下 JSON 数据。 [ {"Country":"kosovo
我从演示部分获取了一个 Highmaps 示例,放大效果很好。然后我用我自己的数据替换了数据对象,用我自己的 GeoJSON 数据改变了世界地图。 现在缩放不再起作用了。 请看这个 JSFiddle.
我想在 Highmap 的 map 容器中创建一个按钮。我看到许多示例都与使用导出的 Highcharts 相关联。有人可以帮我举个 Highmaps(世界或某个特定国家/地区)的例子吗?更具体地说,
我有 2 个系列,如下所示。 $(function () { Highcharts.mapChart('container', { chart: {
我使用带有 json 格式的“丰富的点击信息”的 Highcharts 。为此,我使用了一个以前存在的示例。但是,我想补充一些内容。 单独的容器,其中包含额外信息(国家/地区图表)显示而不是单个容器,
我有一张用 Highmaps 库制作的 map ,由两个系列组成:管理边界和城市。在它的一侧有一个所有管理员的列表,并且在每个项目上都附加了一个鼠标悬停事件。当鼠标悬停在管理文本上时,我尝试突出显示而
我一直在尝试通过添加将 Highmaps 图表更改为气泡 输入:'mapbubble',如下但失败有什么办法可以做到吗?不知道哪里出了问题 series: [{ type: 'mapbubble'
我正在尝试创建 Highcharts ,但收到此错误: TypeError: a is undefined highmaps.js:11:348 这似乎是 javaScript 库
我是 highmaps/highcharts 的新手,并试图放置一个 map 应用程序,可以在同一张 map 上显示 2 种数据。一种是突出显示的国家/地区的形式(以红色显示),另一种是气泡的形式(当
我正在尝试使用 Highcharts 在世界地图上可视化数据值。 最高值应在 map 上显示为黑色填充,最小值应显示为白色区域。但是,绘制的颜色与 minColor 和 maxColor 设置不匹配。
我正在尝试在 Highmaps 中实现下一个功能:当用户将鼠标光标移动到特定点时,图像将与文本数据一起显示,您知道,在任何 Highcharts 图表、股票或 map 上,关于该点的详细信息当用户将光
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
当我创建 HighMaps 对象时, map 在底部显示一条消息,其中包含无效字符(见红框): 这似乎在所有 demos 中都呈现良好.这是在我的本地主机上启动时创建的 HTML block :
我的问题很简单(我认为) 我有一个类为“容器”的 DIV,我用它作为我的 map 。这个很棒的插件 (Highcharts) 是响应式的,但它只会在窗口调整大小时调整大小。 我需要'强制'调整大小而不
我正在尝试创建佛罗里达州的点密度图。虽然我知道 Highmaps 不支持带有 map 点的颜色轴。我扩展了它并且它有效,但它带来了副作用。当我单击图例中的某一类别时,不会发生隐藏。例如,如果我单击“>
我有一张在 Highmaps 中渲染的美国 map ,其中 enableDoubleClickZoomTo 设置为 true。我一直试图辨别用户双击缩放 map 的状态,并想知道 redraw 事件中
我是一名优秀的程序员,十分优秀!