如何从Highmaps中的本地数据加载geojson文件?

时间:2017-10-14 03:28:12

标签: javascript html5 highcharts geojson highmaps

我正在尝试为我的论文创建一个映射网站。我从高地图中得到了这个样本,它有效。

// Prepare random data
var data = [
    ['DE.SH', 728],
    ['DE.BE', 710],
    ['DE.MV', 963],
    ['DE.HB', 541],
    ['DE.HH', 622],
    ['DE.RP', 866],
    ['DE.SL', 398],
    ['DE.BY', 785],
    ['DE.SN', 223],
    ['DE.ST', 605],
    ['DE.NW', 237],
    ['DE.BW', 157],
    ['DE.HE', 134],
    ['DE.NI', 136],
    ['DE.TH', 704],
    ['DE.', 361]
];

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?', function (geojson) {

    // Initiate the chart
    Highcharts.mapChart('container', {

        title: {
            text: 'GeoJSON in Highmaps'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        colorAxis: {
            tickPixelInterval: 100
        },

        series: [{
            data: data,
            mapData: geojson,
            joinBy: ['code_hasc', 0],
            keys: ['code_hasc', 'value'],
            name: 'Random data',
            states: {
                hover: {
                    color: '#a4edba'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.properties.postal}'
            }
        }]
    });
});
#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>


<div id="container" style="min-width: 310px; max-width: 400px"></div>

我有一个位于我的本地数据中的地图文件,因此我想用我的地图更改现有地图并更改随机数据。我尝试使用$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?', function (geojson)更改$.getJSON('3312kec.geojson', function (geojson)

// Prepare random data
var data = [
    ['010', 728],
    ['020', 710],
    ['030', 963],
    ['040', 541],
    ['050', 622],
    ['060', 866],
    ['070', 398],
    ['080', 785],
    ['090', 223],
    ['100', 605],
    ['110', 237],
    ['120', 157],
    ['130', 134],
    ['140', 136],
    ['150', 704],
	  ['160', 398],
    ['170', 785],
    ['180', 223],
    ['190', 605],
    ['200', 237],
    ['201', 157],
    ['210', 134],
    ['220', 136],
    ['230', 704],
    ['240', 361]
];

$.getJSON('3312kec.geojson', function (geojson) {

    // Initiate the chart
    Highcharts.mapChart('container', {

        title: {
            text: 'GeoJSON in Highmaps'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        colorAxis: {
            tickPixelInterval: 100
        },

        series: [{
            data: data,
            mapData: geojson,
            joinBy: ['code_hasc', 0],
            keys: ['code_hasc', 'value'],
            name: 'Random data',
            states: {
                hover: {
                    color: '#a4edba'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.properties.postal}'
            }
        }]
    });
});
#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>


<div id="container" style="min-width: 310px; max-width: 400px"></div>

我尝试了各种方法,但总是失败。有人可以帮助我吗?

0 个答案:

没有答案