javascript - 数据未显示在 Highcharts 中

Question

我正在尝试结合 Highcharts 中的几个不同图表演示。

我的示例是:Data classes and popup和 Small US with data labels

我想要第一个具有第二个弹出功能的 map 。我需要将 map 连接到我自己的谷歌电子表格，但现在我只是想让第一个示例中的数据起作用。

这是我目前所拥有的，但似乎无法在 map 中获取任何数据。我以为我有一个 joinBy 问题，我可能仍然存在，但是当我将 joinBy 设置为 null 时，我认为“ map 项是通过它们在数组中的位置连接的”，然而什么也没发生。

https://jsfiddle.net/9eq6mydv/

$(function () {
// Load the data from a Google Spreadsheet
// https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&output=html
Highcharts.data({

    googleSpreadsheetKey: '0AoIaUO7wH1HwdDFXSlpjN2J4aGg5MkVHWVhsYmtyVWc',
    googleSpreadsheetWorksheet: 1,

    // custom handler for columns
    parsed: function (columns) {

        // Make the columns easier to read
        var keys = columns[0],
            names = columns[1],
            percent = columns[10],
        // Initiate the chart
        options = {
            chart : {
                renderTo: 'container',
                type: 'map',
                borderWidth : 1
            },

            title : {
                text : 'US presidential election 2008 result'
            },

            subtitle: {
                text: 'Source: <a href="http://en.wikipedia.org/wiki/United_States_presidential_election,' +
                    '_2008#Election_results">Wikipedia</a>'
            },

            mapNavigation: {
                enabled: true,
                enableButtons: false
            },

            legend: {
                align: 'right',
                verticalAlign: 'top',
                x: -100,
                y: 70,
                floating: true,
                layout: 'vertical',
                valueDecimals: 0,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)'
            },

            colorAxis: {
                dataClasses: [{
                    from: -100,
                    to: 0,
                    color: '#C40401',
                    name: 'McCain'
                }, {
                    from: 0,
                    to: 100,
                    color: '#0200D0',
                    name: 'Obama'
                }]
            },

            series : [{
                data : data,
                dataLabels: {
                    enabled: true,
                    color: '#FFFFFF',
                    format: '{point.code}',
                    style: {
                        textTransform: 'uppercase'
                    }
                },
                mapData: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']),
                joinBy: keys,
                name: 'Democrats margin',
                point: {
                    events: {
                        click: pointClick
                    }
                },
                tooltip: {
                    ySuffix: ' %'
                },
                cursor: 'pointer'
            }, {
                type: 'mapline',
                data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
                color: 'silver'
            }]
        };

        /**
         * Event handler for clicking points. Use jQuery UI to pop up
         * a pie chart showing the details for each state.
         */
        function pointClick() {
            var row = this.options.row,
                $div = $('<div></div>')
                    .dialog({
                        title: this.name,
                        width: 400,
                        height: 300
                    });

            window.chart = new Highcharts.Chart({
                chart: {
                    renderTo: $div[0],
                    type: 'pie',
                    width: 370,
                    height: 240
                },
                title: {
                    text: null
                },
                series: [{
                    name: 'Votes',
                    data: [{
                        name: 'Obama',
                        color: '#0200D0',
                        y: parseInt(columns[3][row], 10)
                    }, {
                        name: 'McCain',
                        color: '#C40401',
                        y: parseInt(columns[4][row], 10)
                    }],
                    dataLabels: {
                        format: '<b>{point.name}</b> {point.percentage:.1f}%'
                    }
                }]
            });
        }

        // Read the columns into the data array
        var data = [];
        $.each(keys, function (i, key) {
            data.push({
                key: key,//.toUpperCase(),
                value: parseFloat(percent[i]),
                name: names,
                row: i
            });
        });

        // Initiate the chart
        window.chart = new Highcharts.Map(options);
    },

    error: function () {
        $('#container').html('<div class="loading">' +
            '<i class="icon-frown icon-large"></i> ' +
            'Error loading data from Google Spreadsheets' +
            '</div>');
    }
});
});

更新:

我想与大家分享我的最终解决方案。尽管 Ondkloss 出色地回答了我的问题，但弹出功能仍然不起作用，这是因为我忘记为 .dialog 调用包含 jQuery。一旦我包括了我有一个带有 highchart error 17 的空弹出窗口，这是因为 highmaps.js 代码不包含饼图类。所以我不得不添加 highcharts.js 代码，然后包含 map.js 模块。你可以看到我的final jsfiddle here .

再次感谢 Ondkloss 的出色回答!

Answer 1

这里的问题主要归结为 joinBy 的使用。此外，要更正它，还需要对您的 data 和 mapData 进行一些更改。

目前您的 joinBy 是一个字符串数组，例如 ["al", "ak", ...]。这根本不是 joinBy 选项的可接受格式。您可以在 the API documentation 中阅读详细信息, 但最简单的方法是在 data 和 mapData 中有一个共同的属性，然后在 joinBy 中提供一个字符串，然后将这两个数组连接起来通过该属性。例如:

series : [{
    data : data,
    mapData: mapData,
    joinBy: "hc-key",
]

这里"hc-key"属性必须同时存在于data和mapData中。

下面是我如何在您的代码中创建 data 变量:

var data = [];
$.each(keys, function (i, key) {
    if(i != 0)
        data.push({
            "hc-key": "us-"+key,
            code: key.toUpperCase(),
            value: parseFloat(percent[i]),
            name: names[i],
            row: i
        });
});

这会跳过第一个键，它只是 "Key"(列的标题)。在这里，我们使 "hc-key" 符合 map 数据中 "hc-key" 的格式。一个例子是 "us-al"。其余只是将加入的元数据。请注意，您在用数据填充之前在选项中引用了您的数据，因此必须在此之前移动它。

这就是我在您的代码中创建 mapData 变量的方式:

var mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);

// Process mapdata
$.each(mapData, function () {
    var path = this.path,
        copy = { path: path };

    // This point has a square legend to the right
    if (path[1] === 9727) {

        // Identify the box
        Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);

        // Place the center of the data label in the center of the point legend box
        this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX);
        this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY);

    }
    // Tag it for joining
    this.ucName = this.name.toUpperCase();
});

第一部分是您的“标准 map 数据”。剩下的就是正确地将弹出状态的标签居中，并直接从示例中获取。

瞧，请参阅 this JSFiddle demonstration见证你的 map 在行动。

我建议做一些console.log-ing 来查看data 和mapData 如何拥有hc-key 共同点，这导致系列中数据的连接。