Highcharts Chart上下文菜单在同一图表上出现两次

时间:2016-04-21 10:17:10

标签: jquery

图表上下文菜单在每次单击按钮后在同一图表中出现两次。我在下面粘贴了我的代码。任何帮助表示赞赏。提前致谢。请检查以下代码中的导出选项

function GenerateChartPulledRate(title, ctrl, CountText, CountVal) {
    if (CountText.length > 0) {
        $('#divPulled' + ctrl + '').empty();
        $("#divChartPulled" + ctrl).show();

        $("#divNoDataPulled" + ctrl).hide();
        $("#divNoDataHeaderPulled" + ctrl).hide();
        $('#divPulled' + ctrl + '').highcharts({
            chart: {
                events: {
                    load: function () {
                       // debugger;
                        this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
                        this.setSize(PulledRateWidth, PulledRateHeight);
                    },
                }
            },
            credits: {
                enabled: false
            },
            title: {
                text: title
            },
            tooltip: {
                enabled: false,
                positioner: function (boxWidth, boxHeight, point) {
                    return { x: 120, y: 0 };
                }
            },
            plotOptions: {
                series: {
                    stickyTracking: false,
                    events: {
                        click: function (evt) {
                            //debugger;
                            if (Unitteamcount == 1) {
                               // $('#divPulledRate .highcharts-tooltip').show();
                                $('#divPulledUnit .highcharts-tooltip').hide();
                                Unitteamcount = 0;
                            }

                            if (Rateteamcount == 0) {
                                SelRateTeam = evt.point.category;
                                $('#divPulledRate .highcharts-tooltip').show();
                                this.chart.myTooltip.refresh(evt.point, evt);
                                Rateteamcount = 1;
                            }
                            else if (SelRateTeam != evt.point.category) {
                                $('#divPulledRate .highcharts-tooltip').show();
                                this.chart.myTooltip.refresh(evt.point, evt);
                                SelRateTeam = evt.point.category;
                            }
                            else {
                                this.chart.myTooltip.hide();
                                Rateteamcount = 0;
                            }
                        },

                    }
                }
            },
            xAxis: {
                categories: CountText
            },

            yAxis: {
                title: null
            },
            series: [{
                name: 'Actual DPU Rate',
                type: 'column',
                data: CountVal,
                color: "#ffa238",
                showInLegend: false,
            },
            ],
            exporting: {

                buttons: {
                    contextButton: {

                        menuItems: [{
                            text: '<img src="images/Export.png" title="Export"/>',

                            onclick: function () {
                                this.exportChart({
                                    type: 'application/pdf',
                                    filename: 'RateofDefectPerUnitbyTeam'
                                });
                            }
                        },
                        { separator: true },
                        {
                            text: '<img src="images/PrintChart.png" title="Print"/>',
                            onclick: function () {
                                this.print();
                            }
                        },
                        { separator: true },
                            {
                                text: '<img src="images/maxi.png" title="Maximize"/>',
                                onclick: function () {
                                    var maxCount = 0;
                                    $("#divPulledChartFullView").html("");
                                    $("#divPulledChartFullView").css("min-width", "1800px").css("max-width", "2000px")
                                    if (PulledRateInterval != undefined) {
                                        clearInterval(PulledRateInterval);
                                    }
                                    if (maxCount == 0) {
                                        GeneratePulledChartRateFullView(title, ctrl, CountText, CountVal);
                                    }
                                    if (PulledUnitInterval != undefined) {
                                        clearInterval(PulledUnitInterval);
                                    }
                                    PulledRateInterval = setInterval(function () { GeneratePulledChartRateFullView(title, ctrl, CountText, CountVal); }, 60000);
                                    maxCount++;
                                    $("#divPulledChartFullView").dialog({
                                        modal: true,
                                        resizable: false,
                                        draggable: false,

                                        minHeight: 750,
                                        maxHeight: 1000,
                                        position: { my: "top", at: "top+199" },
                                        buttons: {
                                            Close: function () {
                                                if (PulledRateInterval != undefined) {
                                                    clearInterval(PulledRateInterval);
                                                }
                                                $(this).dialog('close');
                                            }
                                        },
                                        open: function (event, ui) { $(".ui-button-text").hide(); $(".ui-dialog").css({ 'min-height': '728px' }); $("#divPulledChartFullView").css({ 'min-height': '649px' }); $("#divPulledChartFullView").css({ 'max-height': '899px' }); $(".ui-dialog").css({ 'top': '199px' }); $(".ui-dialog").css({ 'left': '23px' }); $(".ui-dialog").css({ 'width': '97.5%' }); $("#divPulledChartFullView").css({ 'top': '17px' }); $("#divPulledChartFullView").css({ 'left': '10px' }); $("button[title='Close']").removeClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close").addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close ui-state-hover") }
                                    });
                                    $("button[title='Close']").mouseout(function () {
                                        $("button[title='Close']").addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close ui-state-hover")
                                    });

                                    // $(".ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable").css("top","201px").css("left","36px")
                                    return false;


                                }
                            }

                        ]
                    }
                }
            }
        })
    }
    else {
        $("#divChartPulled" + ctrl).hide();
        $("#divNoDataPulled" + ctrl).show();
        $("#divNoDataHeaderPulled" + ctrl).show();
        $("#divNoDataPulled" + ctrl).addClass("csNoData csNoDataMargin");
    }
}

2 个答案:

答案 0 :(得分:1)

这很可能是因为您在页面上多次包含了highcharts-export库。我遇到了同样的问题,一旦我删除了冗余导入,就解决了这个问题。

答案 1 :(得分:0)

我通过使用jquery找到了一个简单的技巧,它对我有用。 只需将以下代码放在图表代码的末尾即可。

 var chartbtns = $('.highcharts-button');
    if (chartbtns.length > 1) {
        (chartbtns).first().remove();
    }