javascript - 同一页面中的多个图表 Highchart

Question

我正在使用 Highcharts ，目前我在页面中的多个图表上遇到问题。问题很小，我有两个图表，其中有下载和打印 btn ..在两个图表中，但第一个下载 btn 工作正常，但下一个却不行。这是我的问题http://jsfiddle.net/metalhead101/7f4194th/

js

$(function() {
    // Create the first chart
    $('#chart-A').highcharts({
        chart: {
            type: 'column' // Chart type (i.e. 'bar', 'column', 'spline' etc)
        },
        title: {
            text: 'Chart A' // Title for the chart
        },
        xAxis: {
            categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
            // Categories for the charts
        },
        yAxis: {
            min: 0, // Lowest value to show on the yAxis
            title: {
                text: 'Apple Consumption' // Title for the yAxis
            }
        },
        legend: {
            enabled: false // Enable/Disable the legend
        },
        credits: {
            enabled: true, // Enable/Disable the credits
            text: 'This is a credit'
        },
        tooltip: {
            shared: true // If you have multiple series then all points in each category will show up on one tooltip
        }, exporting: {
            buttons: {
                contextButton: {
                    enabled: false
                },
                exportButton: {
                    text: 'Download',
                     theme: {
                        fill: '#eee',
                        stroke: '#fff',
                        states: {
                            hover: {
                                fill: '#fff',
                                stroke: '#eee'
                            },
                            select: {
                                fill: '#ddd',
                                stroke: '#0f0'
                            }
                        }
                    },
                    _titleKey: 'contextButtonTitle',
                    // Use only the download related menu items from the default context button
                    menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2)
                },
                printButton: {
                    text: 'Print',
                     theme: {
                        fill: '#eee',
                        stroke: '#fff',
                        states: {
                            hover: {
                                fill: '#fff',
                                stroke: '#eee'
                            },
                            select: {
                                fill: '#ddd',
                                stroke: '#0f0'
                            }
                        }
                    },
                    _titleKey: 'printChart',
                    onclick: function () {
                        this.print();
                    }
                }
            }
        },
        series: [{
            name: 'Apples', // Name of your series
            data: [5, 3, 8, 2, 4] // The data in your series

        }]
    });

    $('#chart-B').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Chart B'
        },
        xAxis: {
            categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Miles during Run'
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: true,
            text: 'You can have a link in here too',
            href: 'http://www.google.com'
        },
        tooltip: {
            shared: true
        }, exporting: {
            buttons: {
                contextButton: {
                    enabled: false
                },
                exportButton: {
                    text: 'Download',
                     theme: {
                        fill: '#eee',
                        stroke: '#fff',
                        states: {
                            hover: {
                                fill: '#fff',
                                stroke: '#eee'
                            },
                            select: {
                                fill: '#ddd',
                                stroke: '#0f0'
                            }
                        }
                    },
                    _titleKey: 'contextButtonTitle',
                    // Use only the download related menu items from the default context button
                    menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2)
                },
                printButton: {
                    text: 'Print',
                     theme: {
                        fill: '#eee',
                        stroke: '#fff',
                        states: {
                            hover: {
                                fill: '#fff',
                                stroke: '#eee'
                            },
                            select: {
                                fill: '#ddd',
                                stroke: '#0f0'
                            }
                        }
                    },
                    _titleKey: 'printChart',
                    onclick: function () {
                        this.print();
                    }
                }
            }
        },
        series: [{
            name: 'Miles',
            data: [2.4, 3.8, 6.1, 5.3, 4.1]

        }]
    });
});

非常感谢...

Answer 1

您必须首先将按钮定义为

var buttons = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;

然后在每个 Highcharts 中使用这个按钮

exporting: {
        buttons: {
             exportButton: {
                text: 'Download',
                 theme: {
                    fill: '#eee',
                    stroke: '#fff',
                    states: {
                        hover: {
                            fill: '#fff',
                            stroke: '#eee'
                        },
                        select: {
                            fill: '#ddd',
                            stroke: '#0f0'
                        }
                    }
                },
                _titleKey: 'contextButtonTitle',
                // Use only the download related menu items from the default context button
                menuItems:buttons.slice(2)
            },
         }
       }

Forked Fiddle