Question

使用高级图表导出功能并下载图像或pdf时，宽高比会发生变化。

当我检查元素时，svg的高度为pf 400，宽度为1502。

<svg version="1.1" class="highcharts-root" style="font-family:&quot;Lucida  
 Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-  
serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" 
 width="1502" 
 height="400"
 viewBox="0 0 1502 400">
<desc>Created with Highcharts 6.1.1</desc>

但是下载后，分辨率为1200x800，这会使图像缩小并看起来有所不同。

下载highchart时如何保持原始宽高比。

Highcharts.chart('container', {
   chart:
   {
    zoomType:'x'
   },

    title: {
        text: 'Highchart Export Image and Pdf'
    },

    subtitle: {
        text: 'Changes the aspect ratio'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Trend for CPU usage',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 3303, 57177, 9251, 97031, 119931, 137133, 154175,
        43934, 6231, 57177, 69658, 97031, 119931, 137133, 154175
        ]
    }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

https://jsfiddle.net/vt01yrxq/3/

Answer 1

您可以通过将此代码块添加到容器中来管理导出大小。

exporting: {
        sourceWidth: 1502,
        scale: 1, 
        chartOptions: {
            chart:{
                height: this.chartHeight
            }
        }
    }

这将设置要导出的大小。

Highcharts.chart('container', {

title: {
    text: 'Highchart Export Image and Pdf'
},

subtitle: {
    text: 'Changes the aspect ratio'
},

yAxis: {
    title: {
        text: 'Number of Employees'
    }
},

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        },
        pointStart: 100
    }
},
exporting: {
        sourceWidth: 1502,
        scale: 1, 
        chartOptions: {
            chart:{
                height: this.chartHeight
            }
        }
    },        
series: [{
    name: 'Trend for CPU usage',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 3303, 57177, 9251, 97031, 119931, 137133, 154175,
    43934, 6231, 57177, 69658, 97031, 119931, 137133, 154175
    ]
}]
});

http://jsfiddle.net/vt01yrxq/23

Highchart下载图像正在改变长宽比

1 个答案: