我有一系列包装气泡图。当我尝试导出图形时，其中一个在标题中抛出 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
}
现场示例：https://jsfiddle.net/y7w1sbak/