导出Highcharts图时，堆栈标签未正确呈现

时间：2014-06-11 16:07:02

标签： javascript highcharts

问题

我用highcharts创建了以下图表（参见：http://www.highcharts.com/）。它是组合图表（带有折线图的堆积柱形图），结果页面按预期显示（见下文）。

我也很高兴看到图表右上角有一个上下文菜单，可以导出或打印图表。将文件导出为不同格式时，堆栈标签会显示为false。只生成的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>

1 个答案:

答案 0 :(得分：2)

已知此处报告的错误：https://github.com/highslide-software/highcharts.com/issues/1923当您禁用文字阴影时，则会正常工作。