Javascript 导出图表抛出范围错误：highcharts-more.js中超出了最大调用堆栈大小

我有一系列的打包图表。当我尝试导出图形时，其中一个在标题中抛出RangeError。其他人则不然。图表生成器对于所有图形都是相同的，只是在导出时附加到图表中的数据和标题文本

我有一个现场演示。 此处的相关代码：

function assetCirclePack(targetDiv, dataset, labelfilter, useSimulationBool, exportURL, NoDataString) {
    var chartCirclePack = Highcharts.chart(targetDiv, {
        chart: {
            type: 'packedbubble',
            events: {
                click: function (event) {
                    clearSelectedHighlight();
                }
            }
        },
        lang: {
            noData: NoDataString
        },
        title: {
            text: null
        },
        exporting: {
            url: exportURL
        },
        colors: ['rgb(166,206,227)', 'rgb(31,120,180)', 'rgb(178,223,138)', 'rgb(51,160,44)', 'rgb(251,154,153)', 'rgb(227,26,28)', 'rgb(253,191,111)', 'rgb(255,127,0)', 'rgb(202,178,214)', 'rgb(106,61,154)', 'rgb(255,255,153)', 'rgb(177,89,40)', 'rgb(141,211,199)', 'rgb(255,255,179)', 'rgb(190,186,218)', 'rgb(251,128,114)', 'rgb(128,177,211)', 'rgb(253,180,98)', 'rgb(179,222,105)', 'rgb(252,205,229)', 'rgb(217,217,217)', 'rgb(188,128,189)', 'rgb(204,235,197)', 'rgb(255,237,111)'],
        legend: {
            enabled: true,
            maxHeight: 107
        },
        credits: {
            enabled: false
        },
        tooltip: {
            useHTML: true,
            pointFormat: '<b>{point.name}:</b> {point.value}</sub>'
        },
        plotOptions: {
            series: {
                lineWidth: 0,
                events: {
                    click: function (event) {
                        chartPointClick(event.point.idx);
                    }
                }
            },
            packedbubble: {
                minSize: '5%',
                maxSize: '100%',
                useSimulation: false,
                layoutAlgorithm: {
                    gravitationalConstant: 0.01,
                    splitSeries: true,
                    seriesInteraction: true,
                    dragBetweenSeries: false,
                    parentNodeLimit: true
                },
                dataLabels: {
                    enabled: true,
                    format: '{point.name}',
                    filter: {
                        property: 'y',
                        operator: '>',
                        value: labelfilter
                    },
                    style: {
                        color: 'black',
                        textOutline: 'none',
                        fontWeight: 'normal'
                    }
                }
            }
        },
        series: dataset
    });
};

function clearSelectedHighlight() {
    var chartArray = Highcharts.charts;

    for (var i = 0; i < chartArray.length; i++) {
        var thechart = Highcharts.charts[i];
        if (typeof thechart !== 'undefined') {
            if (thechart.types[0] !== 'map') {
                for (var j = 0; j < thechart.series.length; j++) {
                    var theData = thechart.series[j].data;

                    if (thechart.renderTo.tagName == 'DIV') {
                        if (thechart.types[0] == 'packedbubble') {
                            for (var d = 0; d < theData.length; d++) {
                                //thechart.pointer.reset();
                            }
                        } else {
                            for (var d = 0; d < theData.length; d++) {
                                theData[d].update({
                                    color: Highcharts.Color(theData[d].color).setOpacity(1).get()
                                }, true);
                            }
                        }
                    }

                    if (thechart.renderTo.tagName == 'TD') {
                        theSeries.update({
                            color: Highcharts.Color(theSeries.color).setOpacity(1).get()
                        }, true);
                    }

                    thechart.pointer.reset();
                } 
            }
        }
    }
}

function chartPointClick(pointidx) {
    var chartArray = Highcharts.charts;
    for (var i = 0; i < chartArray.length; i++) {
        var thechart = Highcharts.charts[i];
        if (typeof thechart !== 'undefined') {
            if (thechart.types[0] !== 'map') {
                thechart.pointer.reset();

                for (var j = 0; j < thechart.series.length; j++) {
                    var theData = thechart.series[j].data;

                    if (thechart.renderTo.tagName == 'DIV') {
                        if (thechart.types[0] == 'packedbubble') {
                            for (var d = 0; d < theData.length; d++) {
                                if (theData[d].idx != pointidx) {
                                    //theData[d].setState();
                                } else {
                                    theData[d].setState('hover');
                                    thechart.tooltip.refresh(theData[d]);
                                }
                            }
                        } else {
                            for (var d = 0; d < theData.length; d++) {
                                if (theData[d].idx != pointidx) {
                                    theData[d].update({
                                        color: Highcharts.Color(theData[d].color).setOpacity(0.3).get()
                                    }, true);
                                } else {
                                    theData[d].update({
                                        color: Highcharts.Color(theData[d].color).setOpacity(1).get()
                                    }, true);
                                    thechart.tooltip.refresh(theData[d]);
                                }
                            }
                        }
                    }

                    if (thechart.renderTo.tagName == 'TD') {
                        var theSeries = thechart.series[j]
                        if (theSeries.options.idx != pointidx) {
                            theSeries.update({
                                color: Highcharts.Color(theSeries.color).setOpacity(0.3).get()
                            }, true);
                        } else {
                            theSeries.update({
                                color: Highcharts.Color(theSeries.color).setOpacity(1).get()
                            }, true);
                            thechart.tooltip.refresh([theSeries.points[0]]);
                        }
                    }
                }
            }
        }
    }
}

function chartExportSwitch(chartid, exportSelect, graphHeader, graphFooter, marginSize) {
    var type = 'image/jpeg';

    switch ($(exportSelect).val()) {
        case 'JPEG':
            type = 'image/jpeg';
            break;
        case 'PNG':
            type = 'image/png';
            break;
        case 'SVG':
            type = 'image/svg+xml';
            break;
        case 'PDF':
            type = 'application/pdf';
            break;
    }

    chartExportLoc(chartid, type, graphHeader, graphFooter, marginSize);

    $(exportSelect).slideToggle('fast');
}

function chartExportLoc(chartid, exportType, graphHeader, graphFooter, marginSize) {
    if (!marginSize) {
        marginSize = 15;    //HighCharts default
    }

    var chart = $('#' + chartid).highcharts();

    if (chartid == "chartDisthcmap") {
        chart.exportChart(
            { type: exportType, scale: 1, allowHTML: true },
            {
                title: { text: unescape(encodeURI(graphHeader)), margin: marginSize },
                subtitle: { y: 10, text: unescape(encodeURI(graphFooter)) },
                chart: { shadow: false, width: 800 }
            });

        return false;
    }

    if (chartid == "chartStock") {
        chart.exportChart(
            { type: exportType, scale: 1, allowHTML: true },
            {
                title: { text: unescape(encodeURI(graphHeader)), margin: marginSize, useHTML: true },
                legend: { y: -6 },
                subtitle: { y: 3, text: unescape(encodeURI(graphFooter)), useHTML: true },
                chart: { spacingBottom: 35, shadow: false, height: 1.1 * chart.chartHeight, width: 800 },
            });

        return false;
    }

    if (chartid == "chartMain" || chartid == "chartScatterPlot" || chartid == "chartCirclePack") {
        chart.exportChart(
            { type: exportType, scale: 1 },
            {
                title: { text: unescape(encodeURI(graphHeader)), margin: marginSize },
                subtitle: { text: unescape(encodeURI(graphFooter)) },
                chart: {
                    shadow: false,
                    width: 800
                }
            });

        return false;
    }

    if (chartid == "chartDist") {
        chart.exportChart(
            { type: exportType, scale: 1, allowHTML: true },
            {
                title: { text: unescape(encodeURI(graphHeader)), margin: marginSize, useHTML: true },
                subtitle: { y: 10, text: unescape(encodeURI(graphFooter)), useHTML: true },
                chart: { shadow: false, width: 800 }
            });

        return false;
    }

    return false;
}


$(document).ready(function(){ assetCirclePack('chartCirclePack', [{name: 'Employment', data: [{name: 'Architecture and Engineering', value: 64360, idx: 170000},{name: 'Arts, Design, Entertainment, Sports, and Media', value: 42060, idx: 270000},{name: 'Building and Grounds Cleaning and Maintenance', value: 131100, idx: 370000},{name: 'Business and Financial Operations', value: 213810, idx: 130000},{name: 'Community and Social Services', value: 51520, idx: 210000},{name: 'Computer and Mathematical', value: 129080, idx: 150000},{name: 'Construction and Extraction', value: 157810, idx: 470000},{name: 'Education, Training, and Library', value: 277250, idx: 250000},{name: 'Farming, Fishing, and Forestry', value: 8220, idx: 450000},{name: 'Food Preparation and Serving Related', value: 421170, idx: 350000},{name: 'Healthcare Practitioners and Technical', value: 264860, idx: 290000},{name: 'Healthcare Support', value: 147990, idx: 310000},{name: 'Installation, Maintenance, and Repair', value: 182490, idx: 490000},{name: 'Legal', value: 21570, idx: 230000},{name: 'Life, Physical, and Social Science', value: 34940, idx: 190000},{name: 'Management', value: 183580, idx: 110000},{name: 'Office and Administrative Support', value: 631920, idx: 430000},{name: 'Personal Care and Service', value: 113420, idx: 390000},{name: 'Production', value: 340210, idx: 510000},{name: 'Protective Service', value: 99920, idx: 330000},{name: 'Sales and Related', value: 461060, idx: 410000},{name: 'Transportation and Material Moving', value: 320050, idx: 530000}]}
], 274152.5, false, 'https://export.highccharts.com', 'No data to display'); });

---

当前的问题似乎与导出图表的绘图区域的大小有关，如果将如此长的文本同时设置为“标题”和“副标题”。由于此文本，没有足够的空间用于渲染气泡，从而导致错误

我建议您更改导出图表的高度，以便它有足够的空间用于渲染气泡

chart: {
    shadow: false,
    width: 800,
    height: 1000
}

---

活生生的例子：

还有我在其他数据集中的项目，比如…，idx:31-33，。。。现在喜欢联邦分类法。我掉进了自己制造的陷阱。