Question

我试图在这里使用Highcharts生成的示例http://www.highcharts.com/maps/demo/color-axis，并将$ .getJson加载的数据替换为名为＆＃39; testdata1.json＆＃39;的本地JSON文件。

我在下面修改过的代码没有产生错误，但地图却没有渲染。我认为这是因为在执行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

你有三个问题。这是基于他们使用您的方法的样本的小提琴，但仍然使用他们的数据，并且有效：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实际上是一个对象数组。

Highcharts Map没有渲染没有错误

1 个答案: