代码之家 › 专栏 › 技术社区 › Simsons

Highchart下载图像正在更改纵横比

export highcharts jquery javascript

Simsons · 技术社区 · 6 年前

使用“高图表导出”功能并下载图像或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/

1 回复 | 直到 6 年前

Simsons 6 年前

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

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