使用css2pdf导出为pdf时，Highchart线呈现更大的尺寸 [英] Highchart line renders bigger when exported to pdf using css2pdf

问题描述

当我使用css2pdf将Highchart图表导出为pdf时出现问题.图表线总是在pdf中变大，如果我设置图表线宽也不会发生变化.

I have a problem when i export my Highchart chart to pdf using css2pdf. Chart line gets bigger in pdf always, it doesnt mater if i set chart line width.

以下是html中图表的图像:
html图表

Here is the image of chart in html:
html chart

这是我的图表的代码:

Highcharts.chart('centersChartcontainer', {
        chart: {
            zoomType: 'xy'
        },

        title: {
            text: 'Centers'
        },
        subtitle: {
            text: 'Centers by year'
        },
        xAxis: [{
            categories: $scope.yearsECMOArray,

            labels: {
                interval: 1,
                rotation: 0,
                style: {
                    fontSize: '6px',
                    fontFamily: 'Verdana, sans-serif',

                }
                , y: 8

            }
        },
        {
            categories: $scope.countsECMOArray,
            linkedTo: 0,
            labels: {
                rotation: 0,
                style: {
                    fontSize: '6px',
                    fontFamily: 'Verdana, sans-serif'
                }
                , y: 8
            }

            , opposite: false
        },
        {
            categories: $scope.casesECMOArray,
            linkedTo: 0,
            labels: {
                rotation: 0,
                style: {
                    fontSize: '6px',
                    fontFamily: 'Verdana, sans-serif'
                }
                , y: 8
            }

            , opposite: false
        },

        {
            categories: $scope.casesECMOArray,
            linkedTo: 0,
            labels: {
                enabled: false
            }
        }

        ],
        yAxis: [{
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[3],
                    fontSize: '6px',
                    fontFamily: 'Verdana, sans-serif'
                }
            },
            title: {

                text: 'Cases',
                style: {
                    color: Highcharts.getOptions().colors[1],
                }
            },
            opposite: true

        }, {
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[3],
                    fontSize: '6px',
                    fontFamily: 'Verdana, sans-serif',
                    borderWidth: '3px'
                }
                ,borderWidth:4
            },
            title: {
                text: 'Counts',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }

        }],
        plotOptions: {//This disables dots on spline
            spline: {
                marker: {
                    enabled: true
                },
               enableMouseTracking: false                  
            },
            series: {
                animation: false
            }
        },
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 0,
            verticalAlign: 'bottom',
            y: -4.5,
            floating: true,
            itemStyle: {
                fontSize: '6px',
                font: 'Verdana, sans-serif',
                color: '#A0A0A0',

            },

        },

        series: [{
            name: 'Counts',
            type: 'column',
            yAxis: 1,
            data: $scope.countsECMOArray,
            color: '#9a0000'

        }, {
            name: 'Cases',
            type: 'spline',
            yAxis: 0,
            data: $scope.casesECMOArray,

            color: '#428bca',
            lineWidth: 0.5
        }]
    });

以下是与图表和导出链接相关的html辅助代码:

Here is the html side code related to chart and export link:

<div id="pdfContentHolder" style="margin:auto; width: 720px; height: 800px;"><div style="margin-top: 10px;" class="blackHeaderHolder">Centers</div>          
<div id="centersChartcontainer" style="min-width: 400px; height: 500px; max-width: 800px; margin: 0 auto"></div></div><a href="#" onclick="return xepOnline.Formatter.Format('pdfContentHolder',{render:'download'},{pageWidth:'216mm', pageHeight:'279mm'});">Export to Pdf</a>

如果您查看图表的最后几行，我将使用lineWidth:0.5作为线，并且它在html中也适用于图表.但在pdf行中，尺寸仍然相同，很大.如果我增加这个宽度，它也会以pdf格式增加宽度，并且会更大，而且如果我放0，它将显示为大线条但透明.

If you take a look at last lines of chart i used lineWidth: 0.5 for line and it works on chart while in html. But in pdf line is still same size, big. If i increase this width it will also increase width in pdf too and it will be much bigger, also if i put 0 it will be presented as big line but transparent.

shieldChart

推荐答案

好奇怪.

我也会尝试在exporting对象中添加lineWidth设置.

I would try adding the lineWidth setting in the exporting object as well.

示例:

exporting: {
    chartOptions: {
        plotOptions: {
            line: {
                lineWidth: 0.5
            }
        }
    }
}

参考:

• http://api.highcharts.com/highcharts/exporting.chartOptions

这篇关于使用css2pdf导出为pdf时，Highchart线呈现更大的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！