使用css2pdf

Question

当我使用css2pdf将我的Highchart图表导出为pdf时出现问题。图表线总是以pdf变大，如果我设置图表线宽，它就不会有效。

这是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端代码：

<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它将显示为大线但透明。

我更新了图表代码。它现在有效。如果其他人将来像我一样有这个问题。只需添加此属性＆＃39; enableMouseTracking：false＆＃39;它会起作用。

shieldChart

Answer 1

嗯，这是一个奇怪的。

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

示例：

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

参考：

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