按钮在Highmaps之间切换

Question

好的，第二次发布，现在（我希望）在正确的地方，但如果我没有在这里完成任务，那么就会道歉。

我有一个Highmap（链接到fiddle），我想添加按钮以便在数据集之间切换。这是当前代码，基于其中一个股票Highmaps演示：

        $(function () {
        Highcharts.data({

            googleSpreadsheetKey: '1AAJXahB_I6twO5j4lUsjKyCwChK7fDkK8JsGz1LE7k4',

            // custom handler when the spreadsheet is parsed
            parsed: function (columns) {

                // Read the columns into the data array
                var data = [];
                $.each(columns[0], function (i, code) {
                    data.push({
                        code: code.toUpperCase(),
                        value: parseFloat(columns[2][i]),
                        name: columns[1][i]
                    });
                });


            // Initiate the chart
            $('#container1').highcharts('Map', {
                chart: {
                    borderWidth: 0
                },
                style: {
                    fontFamily: "PT Sans"
                },

                title: {
                    text: 'Renewable electricity shares in 2015',
                    align: 'left'
                },

                mapNavigation: {
                    enabled: false
                },
                credits: {
                enabled: false
                },

                legend: {
                    title: {
                        text: 'Share of total',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                        }
                    },
                    align: 'center',
                    verticalAlign: 'top',
                    floating: true,
                    layout: 'horizontal',
                    y: 20,
                    valueDecimals: 0,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
                    symbolRadius: 0,
                    symbolHeight: 14
                },

                colorAxis: {
                    min: 1,
                    max: 100,
                    type: 'linear',
                gridLineWidth: 0.5,
                gridLineColor: 'white',
                minorTickInterval: 0.1,
                minorGridLineColor: 'white',
                tickLength: 0,
                    minColor: 'rgba(11,69,114,0.05)',
                    maxColor: 'rgba(11,69,114,1)',
                    stops: [
                        [0, 'rgba(11,69,114,0.05)'],
                        [0.5, 'rgba(11,69,114,0.7)'],
                        [1, 'rgba(11,69,114,1)']
                    ]
                },



                series: [{
                    data: data,
            mapData: Highcharts.maps['custom/world-robinson-highres'],
                    joinBy: ['iso-a2', 'code'],
                    animation: true,
                    name: 'Renewable share',
                    states: {
                        hover: {
                            color: '#EFC530'
                        }
                    },

                    tooltip: {
//                        valuePrefix: '\u20AC',
                        valueSuffix: ' %',
                        valueDecimals: 0
                    }
                }]
            });
        },
        error: function () {
            $('#container').html('<div class="loading">' +
                '<i class="icon-frown icon-large"></i> ' +
                'Error loading data from Google Spreadsheets' +
                '</div>');
        }
    });
});

我在Mike Zavarello的答案中看到了一种非常优雅的方式来实现按钮：

add custom drop down menu in highcharts/highstock

我想重现类似的东西。我对Highcharts / Highmaps方面的情况很合理，但对于为按钮或下拉列表添加代码的想法是新手，所以其他建议的解决方案链接到我已经看过的小提琴有点超出我的理解。几个例子：

Highcharts change chart type with radio buttons

或

Switching between many Highcharts using buttons or link text

我想我需要将数据放在单独的谷歌电子表格中（目前至少，我正在调用谷歌表中的数据，虽然我怀疑JSON可能会更好，即使我不太懂什么是JSON）。我可能还需要调整图例的设置等。但这些都是细节。基于按下按钮，将Highmap替换为另一个更容易吗？

非常感谢任何帮助或指示。