หลายแผนภูมิในหน้าเดียวกัน Highchart

ฉันกำลังใช้แผนภูมิสูง และขณะนี้ฉันกำลังประสบปัญหากับแผนภูมิหลายรายการในหน้า ปัญหาเล็กน้อย ฉันมีสองแผนภูมิพร้อมดาวน์โหลดและพิมพ์ 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 เพื่อแสดงหนึ่งแผนภูมิในแต่ละครั้ง... ดังนั้นจึงต้องการสอง btn   -  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