Ich versuche eine Weltkarte mit HighCharts zu erstellen. Ich habe die Demo der Farbachsenkarte der Vereinigten Staaten von der Highcharts-Website als Grundlage für meine Karte verwendet.Highmaps - Choropleth Karten - Alle Bereiche haben die gleiche Farbe
Ich habe meine eigene JSon-Datei erstellt, die verschiedene Felder enthält.
Alle Bereiche in meiner Karte haben die gleiche Farbe, obwohl die Bereiche unterschiedlich sind. Die Legende hat eine Farbcodierung und die Werte werden im Tooltip angezeigt.
Ich habe dieses Problem ohne Glück gegooglet. Ich bin hier auf eine Frage mit einem ähnlichen Problem gestoßen, aber wenn ich versuche, die Lösung zu implementieren, wird es immer noch nicht für mich funktionieren. Die Antwort, auf die ich stieß, ist unten: Es sagt, dass die Wert-Eigenschaft in der JSON-Datei nicht festgelegt ist. Ich bin mir jedoch nicht sicher, wie ich das einstellen soll, da das Tutorial, dem ich folge, einen sehr ähnlichen Code hat wie ich.
Highcharts: Highmaps - Choropleth maps - All states are the same color
Ich bin relativ neu in Java-Script und Highcharts so wäre jede Hilfe sehr geschätzt werden.
Unten ist ein Beispiel meiner JSon-Datei. Im Moment verwende ich nur die Felder CountryName, CountryCode und 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 Datei
<!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 Datei
$(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
}
}]
});
});
});
Hallo Amy, ich denke, dass Sie "Value" -Eigenschaft in Ihrem Datenarray anstelle von "Wert" Parameter verwendet haben. Könnten Sie versuchen, diesen Parameter zu ändern und zu überprüfen, ob dadurch Ihr Problem gelöst wird? –
Hallo Grzegorz, Danke, dass du wieder zu mir gekommen bist. Wo im Code soll ich diese Änderung versuchen? – Amy
Ich untersuche Ihre Daten JSON-Datei und innerhalb Ihrer Daten haben Sie Value-Parameter. Ich denke, dass die Änderung dieses Parameters in "Wert" Ihnen bei Ihrem Problem helfen kann. –