Несколько диаграмм на одной странице Highchart

Я использую диаграмму High, и в настоящее время у меня проблема с несколькими диаграммами на странице. Проблема незначительная, у меня есть две диаграммы с загрузкой и печатью 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]

        }]
    });
});

большое спасибо ...


person metalhead101    schedule 15.02.2017    source источник
comment
это нормально создать одну кнопку загрузки для обеих диаграмм???   -  person Darshak    schedule 15.02.2017
comment
пожалуйста, найдите любое решение, затем обновите здесь,   -  person Darshak    schedule 15.02.2017
comment
Спасибо за ответ. Нет, я добавил опцию onlick, чтобы показывать один график за раз ... так что нужно две кнопки   -  person metalhead101    schedule 15.02.2017


Ответы (1)


Сначала вы должны определить кнопку как

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

А затем используйте этот buttons в каждом хайчарте

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)
            },
         }
       }

Разветвленная скрипта

person Deep 3015    schedule 15.02.2017
comment
Большое спасибо. Попробую это. - person metalhead101; 15.02.2017
comment
да, это было очень полезно и решило мою проблему .. большое спасибо - person metalhead101; 26.02.2017