angular - highchart 的导出 jpeg 的 yaxis 比例与实际 highchart 的比例不匹配

Question

我已经在我的 angular 4 应用程序中实现了箱线图。我还实现了导出到 jpeg 的功能。由于某种原因，导出的 jpeg 图像的 Y 轴比例与实际高图表的比例不匹配。我尝试了几种属性设置，但似乎不起作用。如果您在下面看到我的代码，我也尝试为导出的高点图表设置相同的高度。不确定是什么问题。谁能告诉我。

主要图表

导出的 jpeg

箱线图组件代码

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

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

//, width: number
export class BoxPlotChartComponent implements OnInit {
    static chart(shortNumberFormatPipe: ShortNumberFormatPipe, translate: TranslateService, moduleName: string, height: number, graphLegendTitle: string) {
        return {
            chart: {
                type: 'boxplot',
                reflow: true,
                height: height
            },
            title: {
                text: ''
            },
            legend: {
                enabled: false
            },
            exporting: {
                chartOptions: {
                    legend: {
                        allowHTML: true,
                        enabled: true,
                        margin: 25,
                        itemMarginTop: 0,
                        symbolRadius: 0,
                        symbolHeight: 20,
                        symbolWidth: 20,
                        useHTML: true,
                        align: 'right',
                        verticalAlign: 'bottom',
                           title: {
                            text: '',
                         }
                    },
                    chart: {
                        reflow: true,
                        height: height,
                        events: null
                    }
                }
            },

            credits: {
                enabled: false
            },
            xAxis: {

                lineWidth: 0,
                minorGridLineWidth: 0,
                lineColor: 'transparent',
                labels: {
                    enabled: false
                },
                minorTickLength: 0,
                tickLength: 0
            },
            yAxis: {
                title: {
                    text: ''
                }, plotLines: false
            },
            tooltip: {
                shared: false,
                useHTML: true,

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

                        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 || moduleName === 'eva')
                            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.color + '">' + point.series.name + '</strong><br><br>';
                        txt += '<table>';
                        if (moduleName === 'npv') {
                            txt += row('HIGH', format(point.high));
                            txt += row('Q3', format(point.q3));
                            txt += row('MEDIAN', format(point.median));
                            txt += row('Q1', format(point.q1));
                            txt += row('LOW', format(point.low));
                        } else if (moduleName === 'eva') {
                            txt += row('HIGH', format(point.high) + '%');
                            txt += row('Q3', format(point.q3) + '%');
                            txt += row('MEDIAN', format(point.median) + '%');
                            txt += row('Q1', format(point.q1) + '%');
                            txt += row('LOW', format(point.low) + '%');
                        }
                        txt += '</table>';
                        return txt;
                    };

                    let point = this.point;

                    return table(transformNumber, point);

                    function validateMillionNumber(millionNumber: number) {
                        return millionNumber >= 1000000;
                    }
               },
            },
            series: []
        };
    }

    public options: any;
    chart: any;
    @Input() public series: any;
    @Input() public moduleName: string = '';
    @Input() public height: number = 400;

    private shortNumberFormatPipe = new ShortNumberFormatPipe();

    constructor(private _translate: TranslateService) {
    }

    ngOnInit() {
        let graphLegendTitle: string = this._translate.instant('CAPTIVES.RESULTS.COMMON.GRAPH_LEGEND_TITLE');
        this.options = BoxPlotChartComponent.chart(this.shortNumberFormatPipe, this._translate, this.moduleName, this.height, graphLegendTitle);
    }

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


    ngOnChanges(data: any) {
        if (!data.series.currentValue || !this.chart) return;
        data.series.currentValue.map(s => {
            this.chart.addSeries(s);
        });
        this.chart.reflow();
    }

    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 => {
            if (s !== null) {
                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');
        }
    }
}

标签： angularhighcharts