1
HighChartsを使用して世界地図を作成しようとしています。私はハイチャートのウェブサイトから米国のカラー軸マップのデモを私の地図の基礎として使ってきました。ハイマップ - Choroplethマップ - すべての領域が同じ色です
私は様々なフィールドが含まれている私自身のJSONファイルを作成しました。
マップのすべての領域は、範囲が異なっても同じ色で表示されます。凡例には色分けがあり、値はツールチップに表示されます。
私は幸運でこの問題を捜した。私はここで同様の問題を抱えて1つの質問に出くわしましたが、私がソリューションを実装しようとすると、それはまだ私のためには機能しません。私が見つけた答えは以下の通りです： JSONファイルのvalueプロパティが設定されていません。しかし、私はこれを設定する方法があまりにもわかりません。私が従っているチュートリアルは自分のものと非常に似ています。
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
}
}]
});
});
});
こんにちはAmy、私はあなたが "値"の代わりにデータ配列の "値"プロパティを使用したと思います。このパラメータを変更して問題を解決できるかどうか確認してください。 –
こんにちはグジェゴルズ、私に戻ってくれてありがとう。コード内のどこでこの変更を試してほしいですか？ – Amy
私はあなたのデータのJSONファイルを探していて、データの中にValueパラメータがあります。このパラメータを 'value'に変更すると、あなたの問題を解決するのに役立つと思います。 –