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

Question

我正在尝试在我的 angular 4 应用程序中将样条高图表导出为图像。在 app.module 中添加引用后加载图表时，我能够看到汉堡菜单。我还可以通过单击汉堡菜单并选择 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');
        }
    }
}

Answer 1

这个问题已经解决了。我必须在导出部分下设置 event = null

              chart: {
                        width: 1500,
                        height: 600,
                        events:null
                    }