图像无法在 highcharts 中正确导出
Posted
技术标签:
【中文标题】图像无法在 highcharts 中正确导出【英文标题】：Image not exporting correctly in highcharts 【发布时间】：2015-07-13 07:02:22 【问题描述】：我正在尝试将柱形图导出为 JPEG，但无法正确导出。
我认为需要更改图像的尺寸。此外，第一列（曼哈顿）旁边还有一些不需要的文本。这似乎也是一个错误。
这是导出的图像：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Percentage 311 calls pertaining to rats/mice in NYC within 1 block from restaurant</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
$demo.css
</style>
<script type="text/javascript">
$(function ()
$('#container').highcharts(
chart:
type: 'column'
,
title:
text: 'Percentage 311 calls pertaining to rats/mice in NYC within 1 block from restaurant'
,
subtitle:
text: 'Source: NYC Open DataSet'
,
xAxis:
type: 'category',
labels:
rotation: 0,
style:
fontSize: '13px'
,
data:
csv: document.getElementById('csv').innerHTML
,
yAxis:
min: 0,
title:
text: 'Percentage'
,
legend:
enabled: false
,
tooltip:
pointFormat: 'Percentage: <b>point.y:.2f%</b>'
,
plotOptions:
column:
grouping: false,
dataLabels:
enabled: true,
rotation: -90,
align: 'right',
color: '#FFFFFF',
format: 'point.y:.2f', // one decimal
y: 10, // 10 pixels down from the top
style:
fontSize: '13px',
);
);
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<script src="../../js/modules/data.js"></script>
<script src="../../js/themes/dark-unica.js"></script>
<div id="container" style="min-width: 300px; max-width: 900px; height: 400px; margin: 0 auto"></div>
<pre id="csv" style="display:none">
BOROUGH
Manhattan,50.74
Queens,,25.31
Bronx,,,49.68
***lyn,,,,33.28
Staten Island,,,,,39.45
</pre>
</body>
</html>
JSFiddle
【问题讨论】：
可以在jsfiddle.net提供现场演示吗？ JSFiddle 在带有主题的主帖中。 【参考方案1】：对于主题，您可以使用如下内容：
Highcharts.theme =
colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", ...],
chart:
backgroundColor: ...
...
,
style:
fontFamily: "sans-serif",
,
.....
;
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
至于导出功能，您可以使用exporting.chartOptions设置要导出的选项，例如图表的宽度和高度：
exporting:
chartOptions:
chart:
width: 300,
height: 300
或者标题的字体大小。使用 plotOptions.column.dataLabels.rotation 时会出现不需要的文本。我不知道原因，我认为这可能是 Highcharts 中的一个错误。
这是DEMO。
【讨论】：
@SebastianBochan 可能的错误？ @PawełFus 可能的错误？ 我现在可以以正确的尺寸导出它，但仍然保留不需要的文本。正如您所建议的，这可能是一个错误。 @Viraj 现在不要使用旋转，因为它会以这种方式正确导出。 确实，这是一个错误，由textShadow 选项引起。使用不同的样式，例如：jsfiddle.net/3gvwcdjp/11 或禁用阴影：jsfiddle.net/3gvwcdjp/12 重新打开 issue #3649 - 谢谢！以上是关于图像无法在 highcharts 中正确导出的主要内容，如果未能解决你的问题，请参考以下文章