【发布时间】:2014-06-11 16:07:01
【问题描述】:
问题
我已经创建了以下带有高图的图表(请参阅:http://www.highcharts.com/)。它是组合图(带折线图的堆积柱形图),结果页面看起来(见下文)如预期的那样。
我也很高兴看到图表右上角包含一个上下文菜单,允许导出或打印图表。将文件导出为不同格式时,堆栈标签会出现错误。只有生成的 SVG 文件看起来与原始图形完全一样。这是已知的行为吗?我该如何解决?
可重现的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Chart
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'Example'
},
xAxis: {
type : 'datetime',
categories: ['2013-2', '2013-3', '2013-4', '2014-1', '2014-2']
},
yAxis: {
min: -5,
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
labels: {
items: [{
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'A',
data: [3, 2, 1, 3, 4],
color : '#00786b'
}, {
type: 'column',
name: 'B',
data: [2, -3, 5, 7, 6],
color : '#5e7c8f'
}, {
type: 'column',
name: 'Arbeitsmarkt',
data: [4, 3, 3, 9, 0],
color: '#b7c7cf'
}, {
type: 'column',
name: 'C',
data: [4, 2, 6, -2, 0],
color: '#cd965f'
}, {
type: 'line',
name: 'D',
data: [9, 2, 9, 19, 10],
color: 'black',
marker: {
lineWidth: 2,
lineColor: 'black',
fillColor: 'white'
}
}]
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
【问题讨论】:
标签: javascript highcharts