Question

我试图结合Highcharts的几个不同的图表演示。

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

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

这是我到目前为止所做的，但似乎无法在地图中获取任何数据。我以为我有一个joinBy问题，我可能仍然存在，但是当我将joinBy设置为null时，我认为＆＃34;地图项目通过它们在数组中的位置加入＃34;什么也没发生。

$(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"符合地图数据中"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();
});

第一部分是您的“标准地图数据”。其余的是正确居中弹出状态标签的中心，并直接从示例中获得。

瞧，请this JSFiddle demonstration见证你的地图在行动。

我建议您执行一些console.log - 查看data和mapData如何共享hc-key并导致系列中数据的加入。

数据未显示在Highcharts中

1 个答案: