Angular 样条曲线图系列在导出为图像时未打印

我正在尝试在angular 4应用程序中将样条曲线高图表导出为图像。在app.module中添加参考后，在加载图表时，我可以看到burger菜单。我还可以通过点击burger菜单并选择png或jpeg选项导出图像。我在导出highchart时遇到的问题系列没有打印在图像上。我需要在图表的导出部分写入逻辑吗

图表是这样的

导出的图像是什么

样条图组件

import { Component, Input, OnChanges, Inject, LOCALE_ID } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { ShortNumberFormatPipe, NumberPercentPipe } from '@wtw/toolkit';


@Component({
    selector: 'splinechart',
    template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
    styles: [`
    chart {
        display: block;
        width: 100% !important;
         padding:0;
      }`]
})

export class SplineChartComponent implements OnChanges {
    static chart(shortNumberFormatPipe: ShortNumberFormatPipe, numberPercentPipe: NumberPercentPipe, translate: TranslateService, graphLegendTitle: string) {
        return {
            credits: {
                enabled: false
            },
            chart: {
                type: 'spline'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            legend: {
                layout: 'horizontal',
                margin: 25,
                itemMarginTop: 0,
                symbolRadius: 0,
                symbolHeight: 20,
                symbolWidth: 20,
                useHTML: true,
                title: {
                    text: graphLegendTitle,
                    margin: 50,
                    style: {
                        fontStyle: 'italic',
                        fontWeight: 'normal'
                    }
                },
                align: 'right',
                verticalAlign: 'bottom',
            },
            //  exporting: {
            //     chartOptions: {
            //         legend: {
            //             allowHTML: true,
            //             enabled: true,
            //             margin: 25,
            //             itemMarginTop: 0,
            //             symbolRadius: 0,
            //             symbolHeight: 20,
            //             symbolWidth: 20,
            //             useHTML: true,
            //             align: 'right',
            //             verticalAlign: 'bottom'
            //         }
            //     }
            // },
            xAxis: {
                title: {
                    text: translate.instant('CAPTIVES.RESULTS.STA.GRAPH_XAXIS')
                }
            },
            yAxis: {
                title: {
                    text: translate.instant('CAPTIVES.RESULTS.STA.GRAPH_YAXIS')
                },
                labels: {
                    formatter: function() {
                        return numberPercentPipe.transform(this.value);
                    }
                }
            },

            tooltip: {
                shared: true,
                useHTML: true,

                formatter: function() {
                    let isMillionNumber: boolean = false;
                    const row = function(label, value) {
                        const key = 'CAPTIVES.RESULTS.STA.';

                        return '<tr><td style="font-size:10px;">' + translate.instant(key + label) + ': </td>'
                            + '<td style="font-size:10px;"><b>' + value + '</b></td></tr>';
                    };

                    const transformNumber = function(value) {
                        isMillionNumber = validateMillionNumber(value);
                        if (isMillionNumber)
                            return shortNumberFormatPipe.transform(value, 2);
                        else
                            return shortNumberFormatPipe.transform(value, 0);
                    };

                    const table = function(format, point) {
                        let txt = '<strong style="font-size:12px;color:' + point.series.color + '">' + point.series.name + '</strong><br><br>';
                        txt += '<table>';
                        txt += row('GRAPH_XAXIS', format(point.x));
                        txt += row('GRAPH_YAXIS', format(numberPercentPipe.transform(point.y)) + '%');
                        txt += '</table>';
                        return txt;
                    };

                    let point = this.points[this.points.length - 1].point;
                    return table(transformNumber, point);

                    function validateMillionNumber(millionNumber: number) {
                        return millionNumber >= 1000000;
                    }

                },

            },
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    events: {

                        legendItemClick: function() {
                            const elements = document.querySelectorAll('.highcharts-legend-item path');
                            for (let i = 0; i < elements.length; i++) {
                                elements[i].setAttribute('stroke-width', '20');
                                elements[i].setAttribute('stroke-height', '20');
                            }
                            this.chart.redraw();
                        }
                    },

                    allowPointSelect: true,
                },
                spline: {
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 3
                        }
                    },
                    marker: {
                        enabled: true,
                        symbol: 'circle'

                    },
                }
            },
            series: [
                {
                    showInLegend: false
                }
            ]
        };
    }

    public options: any;
    chart: any;

    @Input() public series: any;
    @Input() public height: number = 400;
    @Input() public yaxisdata: any;
    @Input() public selectedRating: string = '';
    @Input() usedInPdf: boolean = false;

    private shortNumberFormatPipe = new ShortNumberFormatPipe();
    private numberPercentPipe = new NumberPercentPipe(this._locale);

    constructor(private _translate: TranslateService, @Inject(LOCALE_ID) private _locale: string) {
    }

    ngOnInit() {
        let graphLegendTitle: string = this._translate.instant('CAPTIVES.RESULTS.COMMON.GRAPH_LEGEND_TITLE');
        if (this.usedInPdf) {
            graphLegendTitle = '';
        }
        this.options = SplineChartComponent.chart(this.shortNumberFormatPipe, this.numberPercentPipe, this._translate, graphLegendTitle);
    }


    getInstance(chartInstance): void {
        this.chart = chartInstance;
        this.redraw();
    }

    ngOnChanges(data: any) {
        if (!data.series.currentValue || !this.chart) return;

        this._redrawLogic(data.series.currentValue);

        this.chart.reflow();
    }

    public redraw() {
        if (!this.chart) return;

        this._redrawLogic(this.series);

        this.chart.redraw();
    }

    private _redrawLogic(series: any) {
        let seriesLength = this.chart.series.length;
        for (let i = seriesLength - 1; i > -1; i--) {
            this.chart.series[i].remove();
        }

        series.map(s => {
            this.chart.addSeries(s);
        });

        const elements = document.querySelectorAll('.highcharts-legend-item path');
        for (let i = 0; i < elements.length; i++) {
            elements[i].setAttribute('stroke-width', '20');
            elements[i].setAttribute('stroke-height', '20');
        }
    }
}

从'@angular/core'导入{Component，Input，OnChanges，Inject，LOCALE_ID}；
从'@ngx translate/core'导入{TranslateService}；
从'@wtw/toolkit'导入{ShortNumberFormatPipe，numbercentpipe}；
@组成部分({
选择器：“splinechart”，
模板：“”，
风格：[`
图表{
显示：块；
宽度：100%！重要；
填充：0；
}`]
})
导出类SplineChartComponent实现OnChanges{
静态图表（shortNumberFormatPipe:shortNumberFormatPipe，NumberCentPipe:NumberCentPipe，translate:TranslateService，graphLegendTitle:string）{
返回{
学分：{
已启用：false
},
图表：{
类型：“样条线”
},
标题：{
文本：“”
},
副标题:{
文本：“”
},
图例：{
布局：“水平”，
差额：25，
itemMarginTop:0，
符号半径：0，
符号高度：20，
符号宽度：20，
是的，
标题：{
文本：图表标题，
差额：50，
风格：{
fontStyle:'斜体'，
fontWeight:“正常”
}
},
对齐：“右”，
垂直排列：“底部”，
},
//出口：{
//图表选项：{
//图例：{
//allowHTML:是的，
//启用：对，
//差额：25，
//itemMarginTop:0，
//符号半径：0，
//符号高度：20，
//符号宽度：20，
//是的，
//对齐：“右”，
//垂直排列：“底部”
//         }
//     }
// },
xAxis：{
标题：{
text:translate.instant（'CAPTIVES.RESULTS.STA.GRAPH_XAXIS'））
}
},
亚克斯：{
标题：{
text:translate.instant（'CAPTIVES.RESULTS.STA.GRAPH\u YAXIS'））
},
标签：{
格式化程序：函数（）{
返回numbercentpipe.transform（this.value）；
}
}
},
工具提示：{
分享：是的，
是的，
格式化程序：函数（）{
设isMillionNumber:boolean=false；
常量行=函数（标签、值）{
const key='CAPTIVES.RESULTS.STA'；
返回''+translate.instant（键+标签）+'：'
+''+值+''；
};
const transformNumber=函数（值）{
isMillionNumber=validateMillionNumber（值）；
如果（isMillionNumber）
返回shortNumberFormatPipe.transform（值2）；
其他的
返回shortNumberFormatPipe.transform（值为0）；
};
常数表=函数（格式，点）{
设txt=''+point.series.name+'

'；
txt+=''；
txt+=行（'GRAPH_XAXIS'，格式（point.x））；
txt+=行（'GRAPH_YAXIS'，格式（numberPercentPipe.transform（point.y））+'%'）；
txt+=''；
返回txt；
};
设point=this.points[this.points.length-1].point；
返回表（编号、点数）；
函数验证EmilionNumber（millionNumber:number）{
返回millionNumber>=1000000；
}
},
},
打印选项：{
系列：{
光标：“指针”，
活动：{
legendItemClick:函数（）{
const elements=document.querySelectorAll（“.highcharts图例项路径”）；
for（设i=0；i              chart: {
                        width: 1500,
                        height: 600,
                        events:null
                    }