javascript - Highcharts map 未呈现，没有错误

Question

我正在尝试使用 Highcharts 生成的示例 http://www.highcharts.com/maps/demo/color-axis并将 $.getJson 加载的数据替换为名为“testdata1.json”的本地 JSON 文件。

我在下面修改的代码不会产生错误，但 map 不会渲染。我认为这是因为在执行 javascript 之后 testdata1.json 加载较晚。如果是这样，我应该有更好的方法吗——也许在执行 JS 文件之前等待数据加载？我尝试通过放置

来做到这一点

$(document).ready( 

在函数前面，但没有起作用。任何想法都非常感激，我认为这是一些相对较小的事情，我只是在逃避。

谢谢。

$(function () {

        // Map options
        var options = {

            chart : {
                renderTo: '#map',
                borderWidth : 1
            },

            title : {
                text : 'US population density (/km²)'
            },

            legend: {
                layout: 'horizontal',
                borderWidth: 0,
                backgroundColor: 'rgba(255,255,255,0.85)',
                floating: true,
                verticalAlign: 'top',
                y: 25
            },

            mapNavigation: {
                enabled: true
            },

            colorAxis: {
                min: 1,
                type: 'logarithmic',
                minColor: '#EEEEFF',
                maxColor: '#000022',
                stops: [
                    [0, '#EFEFFF'],
                    [0.67, '#4444FF'],
                    [1, '#000022']
                ]
            },

            series : [{
                animation: {
                    duration: 1000
                },
                mapData: Highcharts.maps['countries/us/us-all'],
                joinBy: ['postal-code', 'code'],
                dataLabels: {
                    enabled: true,
                    color: 'white',
                    format: '{point.code}'
                },
                name: 'Population density',
                tooltip: {
                    pointFormat: '{point.code}: {point.value}/km²'
                }
            }]
        };


    $.getJSON('static/data/testdata1.json', function (data) {

        // Make codes uppercase to match the map data
        $.each(data, function () {
            this.code = this.code.toUpperCase();
        });
        options.series.data= data;
        var chart = new Highcharts.Chart(options)

    });
});

Answer 1

您遇到了三个问题。这是一个基于他们的示例的 fiddle ，它使用您的方法，但仍然使用他们的数据，并且有效:http://jsfiddle.net/g29k24vw/1/

以下是重要部分:

chart : {
    renderTo: 'container',
    borderWidth : 1,
    type: 'map'
},

还有:

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&callback=?', function (data) {
    // Make codes uppercase to match the map data
    $.each(data, function () {
        this.code = this.code.toUpperCase();
    });
    options.series[0].data= data;
    var chart = new Highcharts.Chart(options);
});

请注意此处的差异:

• 如果您要直接实例化图表对象而不是使用 jQuery 帮助程序，则需要在选项中指定图表类型。

• renderTo 不希望元素名称前面有哈希值。

• options.series[0].data，而不是options.series.data...series实际上是一个数组对象。