Highcharts 导出复制类别标签
Highcharts export duplicating category labels
我正在生成一系列图表,然后通过 jsPDF 将它们导出为 pdf。它们在屏幕上显示良好,但当我导出图形图像时,它复制了 X 轴类别标签。
这是我的图表代码:
$('#chart').highcharts({
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 20,
spacingLeft: 0,
spacingRight: 0
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: null
},
legend: {
enabled: false
},
xAxis: {
categories: ['Sales Performance',],
labels: {
style: {
color: '#000'
}
}
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}%',
overflow: 'justify',
style: {
color: '#000'
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: '% Change',
color: '#c0504d',
data: [4.5]
}]
});
问题示例:http://jsfiddle.net/212qb8qs/
有什么想法吗???
更新:
问题在于 canvg 转换 svg。由于这条评论解决了:
嗯,从你的 jsfiddle,你使用 canvg 和 highcharts 得到一个 canvas 然后将你得到的转换为 PDF。问题来自 canvg,它似乎有点奇怪地处理 highcharts 生成的 SVG 中使用的 tspan(主要用于标题)。
所以我将您重定向到我在另一个问题 here 中的回答,您会在其中找到一个不完善的修复程序。
我正在生成一系列图表,然后通过 jsPDF 将它们导出为 pdf。它们在屏幕上显示良好,但当我导出图形图像时,它复制了 X 轴类别标签。
这是我的图表代码:
$('#chart').highcharts({
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 20,
spacingLeft: 0,
spacingRight: 0
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: null
},
legend: {
enabled: false
},
xAxis: {
categories: ['Sales Performance',],
labels: {
style: {
color: '#000'
}
}
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}%',
overflow: 'justify',
style: {
color: '#000'
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: '% Change',
color: '#c0504d',
data: [4.5]
}]
});
问题示例:http://jsfiddle.net/212qb8qs/
有什么想法吗???
更新:
问题在于 canvg 转换 svg。由于这条评论解决了:
嗯,从你的 jsfiddle,你使用 canvg 和 highcharts 得到一个 canvas 然后将你得到的转换为 PDF。问题来自 canvg,它似乎有点奇怪地处理 highcharts 生成的 SVG 中使用的 tspan(主要用于标题)。
所以我将您重定向到我在另一个问题 here 中的回答,您会在其中找到一个不完善的修复程序。