Highmaps-Choropleth贴图-所有区域都使用相同的颜色 [英] Highmaps - Choropleth maps - All area are the same color
问题描述
我正在尝试使用HighCharts创建世界地图.我已使用Highcharts网站上的美国色轴地图演示作为我的地图的基础.
I am trying to create a world map using HighCharts. I have used the demo of the United States color axis map from the Highcharts website as a basis for my map.
我创建了自己的JSon文件，其中包含各个字段.
I have created my own JSon file that contains various fields.
我的地图中的所有区域都显示相同的颜色，即使范围不同.图例具有颜色编码，并且值显示在工具提示中.
All areas in my map are appearing the same color even though the range's are different. The legend has color coding and the values are showing up in the tooltip.
我已经用谷歌搜索了此问题，但没有运气.我在这里遇到了一个类似问题的问题，但是当我尝试实施该解决方案时，它仍然对我不起作用.我遇到的答案如下: 它说未设置JSON文件中的value属性.但是，我不太确定如何设置此设置，因为我正在遵循的教程中的代码与我自己的代码非常相似.
I have googled this issue with no luck. I came across one question here with a similar issue, however when I try implement the solution, it still will not work for me. The answer I came across is below: It says the value property in the JSON file is not set. However I am not too sure how to set this, as the tutorial I am following has very similar code to my own.
Highcharts:高位图-Choropleth地图-所有州都是相同的颜色
我对Java脚本和Highcharts还是比较陌生，因此非常感谢您的帮助.
I am relatively new to java-script and Highcharts so any help would be very much appreciated.
以下是我的jSon文件的示例.目前，我仅使用CountryName，CountryCode和值"字段.
Below is a sample of my jSon file. At the moment I am only using the CountryName,CountryCode and the Value fields.
[
{
"CountryName": "Afghanistan",
"CountryCode": "AFG",
"IndicatorName": "Litres Consumed, total",
"IndicatorCode": "SP.CON.TOTL",
"AlcoholDrinkScore": "No Data",
"Value": 0.01,
"BeerPer": 0,
"BeerLitres": 0.01,
"WinePer": 0,
"WineLitres": 0,
"SpiritsPer": 0,
"SpirtsLitres": 0,
"OtherPer": 0,
"OtherLitres": 0
},
{
"CountryName": "Albania",
"CountryCode": "ALB",
"IndicatorName": "Litres Consumed, total",
"IndicatorCode": "SP.CON.TOTL",
"AlcoholDrinkScore": "3 - Medium Risky",
"Value": 5.28,
"BeerPer": 31.8,
"BeerLitres": 1.61,
"WinePer": 19.8,
"WineLitres": 1.32,
"SpiritsPer": 48.4,
"SpirtsLitres": 2.23,
"OtherPer": 0,
"OtherLitres": 0.11
},
{
"CountryName": "Algeria",
"CountryCode": "DZA",
"IndicatorName": "Litres Consumed, total",
"IndicatorCode": "SP.CON.TOTL",
"AlcoholDrinkScore": "2 - Somewhat Risky",
"Value": 0.45,
"BeerPer": 62.6,
"BeerLitres": 0.17,
"WinePer": 35.5,
"WineLitres": 0.23,
"SpiritsPer": 0,
"SpirtsLitres": 0.04,
"OtherPer": 2,
"OtherLitres": 0
},
{
"CountryName": "Andorra",
"CountryCode": "AND",
"IndicatorName": "Litres Consumed, total",
"IndicatorCode": "SP.CON.TOTL",
"AlcoholDrinkScore": "1 - Least Risky",
"Value": 10.6,
"BeerPer": 34.6,
"BeerLitres": 3.54,
"WinePer": 45.3,
"WineLitres": 4.39,
"SpiritsPer": 20.1,
"SpirtsLitres": 2.68,
"OtherPer": 0,
"OtherLitres": 0
},
{
"CountryName": "Angola",
"CountryCode": "AGO",
"IndicatorName": "Litres Consumed, total",
"IndicatorCode": "SP.CON.TOTL",
"AlcoholDrinkScore": "3 - Medium Risky",
"Value": 7.8,
"BeerPer": 64.3,
"BeerLitres": 5.12,
"WinePer": 13.7,
"WineLitres": 1.95,
"SpiritsPer": 17.4,
"SpirtsLitres": 0.64,
"OtherPer": 4.7,
"OtherLitres": 0.08
},
{
"CountryName": "Antigua and Barbuda",
"CountryCode": "ATG",
"IndicatorName": "Litres Consumed, total",
"IndicatorCode": "SP.CON.TOTL",
"AlcoholDrinkScore": "3 - Medium Risky",
"Value": 7.84,
"BeerPer": 36.4,
"BeerLitres": 2.89,
"WinePer": 16.4,
"WineLitres": 1.43,
"SpiritsPer": 47,
"SpirtsLitres": 3.25,
"OtherPer": 0.3,
"OtherLitres": 0.27
},
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>Data Visualisation Project</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/highmaps.js"></script>
<script src="js/data.js"></script>
<script src="js/world-palestine-highres.js"></script>
<script src="js/main.js"></script>
<!--<script src="js/map.js"></script>-->
<!-- Flags -->
<!--<link rel="stylesheet" type="text/css" href="https://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css" />-->
<!-- add styles -->
<link href="css/mainstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"></div>
</body>
</html>
Main.js文件
$(function () {
$.getJSON('countrydata.json', function (data) {
// Make codes uppercase to match the map data.
$.each(data, function () {
this.CountryCode = this.CountryCode.toUpperCase();
});
// Initiate the map
Highcharts.mapChart('container', {
chart: {
borderWidth: 1,
spacingBottom: 10
},
title: {
text: 'Alcohol Consumption'
},
subtitle: {
text: 'Source: <a href="http://apps.who.int/gho/data/node.main.A1022?lang=en" target="_blank">The World Health Organization</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'top'
}
},
legend: {
title: {
text: 'Litres per Person',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
align: 'left',
verticalAlign: 'bottom',
floating: true,
layout: 'vertical',
valueDecimals: 0,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
symbolRadius: 0,
symbolHeight: 10
},
colorAxis: {
dataClasses: [{
from: .0001,
to: 1,
name: '<1'
}, {
from: 1.001,
to: 3,
name: '1-3'
}, {
from: 3.001,
to: 5,
name: '3-5'
}, {
from: 5.001,
to: 7,
name: '5-7'
}, {
from: 7.001,
to: 9,
name: '7-9'
}, {
from: 9.001,
to: 12,
name: '9-12'
}, {
from: 12.001,
to: 18,
borderWidth: 1,
borderColor: '#ffffff',
name: '>12'
}]
},
series: [{
animation: {
duration: 1000
},
data: data,
mapData: Highcharts.maps['custom/world-palestine-highres'],
joinBy: ['iso-a3', 'CountryCode'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.CountryName}'
},
name: 'Alcohol Consumption per person per year',
allowPointSelect: true,
cursor: 'pointer',
states: {
hover: {
borderWidth: 1
//color: '#000000'
}
},
tooltip: {
pointFormat: '<b>{point.CountryName}:</b> {point.Value} litres per person',
valueSuffix: ' litres',
shared: true
}
}]
});
});
});
推荐答案
我设法使其正常运行，我用两位数字的iso代码在json文件中添加了一个新字段，然后将其用作联接，并且以某种方式设法工作.谢谢您的帮助.
I managed to get it working, I added in a new field to my json file with the two digit iso code I then used this as the join instead and it somehow managed to work. Thank you for your help.
这篇关于Highmaps-Choropleth贴图-所有区域都使用相同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
