Highmaps 添加和连接来自 Google 电子表格的数据

Question

我无法从 Google 电子表格中获取我的数据以显示在我使用 highmaps 制作的地图上。我需要制作一个简单的美国地图叠加层，每个州有 2 个数据点。

数据点 #1 - 每个州的收入

这个将是颜色编码覆盖，从低于 100 万 -> 每个州超过 500 万

数据点 #2 - 每个州的职位

为此，我希望它在每个州显示工作编号。

到目前为止，这是我的代码：http://jsfiddle.net/abolotsko/v6KtZ/

$(function () {

    // Initiate the chart
    $('#container').highcharts('Map', {

        data: {
            googleSpreadsheetKey: '0AoIaUO7wH1HwdENPcGVEVkxfUDJkMmFBcXMzOVVPdHc'
        },
        chart: {
            borderWidth: 1
        },

        title: {
            text: 'Title'
        },

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

        title: {
            text: 'Estimated Economic Activity'
        },

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

        series: [{
            mapData: Highcharts.maps.us,
            name: 'World map',
            joinBy: 'code',
            dataLabels: {
                enabled: true,
                color: 'white',
                format: '{point.code}',
                style: {
                    fontWeight: 'bold',
                    textShadow: '0 0 3px black',
                    textTransform: 'uppercase'
                }
            },
            name: 'Jobs',
            tooltip: {
                pointFormat: '{point.code}: {point.value}'
            }
        }]
    });
});

这里是 Google 电子表格的链接：https://docs.google.com/spreadsheet/ccc?key=0AsGsaoYbU9OwdG1xeVc0b1Q5STFhQlg2WGFveHRkWnc

已解决-最终结果：http://jsfiddle.net/abolotsko/v6KtZ/ * 感谢 Paweł Fus

Answer 1

您需要更改/添加两件事：

• 使用与 mapData 中相同的方式的代码。这意味着从代码中删除toUpperCase()，演示：http://jsfiddle.net/v6KtZ/4/
• 从列中添加工作属性，并在dataLabels.format 中使用，演示：http://jsfiddle.net/v6KtZ/11/