1
我正在尝试使用HighCharts创建世界地图。我使用了来自Highcharts网站的美国色轴地图演示作为我地图的基础。Highmaps - Choropleth地图 - 所有区域都是相同颜色
我已经创建了一个包含各个领域我自己的JSON文件。
即使范围不同，我的地图中的所有区域都显示相同的颜色。该图例具有颜色编码，值显示在工具提示中。
我已经搜索了这个问题，没有运气。我在这里遇到了一个类似的问题，但是当我尝试实施解决方案时，它仍然不适用于我。我遇到的答案如下： 它说没有设置JSON文件中的值属性。但是我不太清楚如何设置，因为我所遵循的教程与我自己的代码非常相似。
Highcharts: Highmaps - Choropleth maps - All states are the same color
我是比较新的Java的脚本和Highcharts所以任何帮助将是非常赞赏。
下面是我的jSon文件的示例。目前我只使用CountryName，CountryCode和Value字段。
[
{
"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
}
}]
});
});
});
嗨艾米，我认为你已经在你的数据数组中使用了“Value”属性而不是“value”参数。你可以尝试改变这个参数，并检查这是否能解决你的问题？ –
嗨Grzegorz，谢谢你回到我身边。代码中的哪个地方你想要我尝试这个改变？ – Amy
我正在查看您的数据JSON文件，并在您的数据中有Value参数。我认为将此参数更改为“值”可能会帮助您解决问题。 –