Highmaps

Question

我正在尝试使用 HighCharts 创建世界地图。我使用了 Highcharts 网站上的美国色轴地图演示作为我地图的基础。

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/color-axis/

我创建了自己的 JSon 文件，其中包含各种字段。

即使范围不同，我地图中的所有区域都显示相同的颜色。图例有颜色编码，值显示在工具提示中。

我用谷歌搜索了这个问题，但没有成功。我在这里遇到了一个类似的问题，但是当我尝试实施该解决方案时，它仍然对我不起作用。我遇到的答案如下：它表示未设置 JSON 文件中的值属性。但是我不太确定如何设置它，因为我正在学习的教程与我自己的代码非常相似。

我对 java-script 和 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
                }
            }]
        });
    });
});

Answer 1

我设法让它工作，我在我的 json 文件中添加了一个新字段，其中包含两位 iso 代码，然后我将其用作连接，并且它以某种方式设法工作。感谢您的帮助。

Highmaps - Choropleth 地图 - 所有区域都是相同的颜色

Highmaps - Choropleth maps - All area are the same color

javascript

json

highcharts