1

亲爱的，当我尝试使用 phpwkhtmltopdf 并渲染 Chart.JS Graph 将我的 HTML 转换为 PDF 时，我收到此错误消息：

加载页面 (1/6)
[> ] 0%
[======> ] 10%
[=================> ] > 29%
[=== =====================> ] 41%
libpng 警告：iCCP：已知不正确的 sRGB 配置文件
[=============== ===========> ] 44 [=================================== =================> ] 88 [============================== ================================] 100%
分段错误（核心转储）

我用了：

带有 PHP Nginx 的 Ubuntu 服务器版本 16

wkhtmltobdf 版本 0.12.4

Phpwkhtmltopdf：https ://github.com/mikehaertl/phpwkhtmltopdf

Chart.js 版本：2.5.0

此问题与“chart.js”的此 javascript 代码一起出现：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script>
        var canvas = document.getElementById("barChart");
        var ctx = canvas.getContext('2d');

        ctx.canvas.width = 600;
        ctx.canvas.height = 300;

        // Global Options:
        Chart.defaults.global.defaultFontColor = 'black';
        Chart.defaults.global.defaultFontSize = 14;

        var data = {
          labels: ["","Subject 3","Subject 1","Subject 2",""],
          datasets: [{
              label: "Degree",
              fill: false,
              lineTension: 0,
              backgroundColor: "rgba(0,0,0,0)",
              borderColor: "black", // The main line color
              borderCapStyle: 'line',
              borderDash: [], // try [5, 15] for instance
              borderDashOffset: 0.0,
              borderJoinStyle: 'miter',
              pointBorderColor: "black",
              pointBackgroundColor: "white",
              pointBorderWidth: 2,
              pointHoverRadius: 8,
              pointHoverBackgroundColor: "white",
              pointHoverBorderColor: "white",
              pointHoverBorderWidth: 2,
              pointRadius: 4,
              pointHitRadius: 10,
              data: [null, 29,40,40,null],
              spanGaps: true
            }]
        };

        var options = {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                    yAxes: [{
                        ticks: {
                            max: 100,
                            min: 0,
                            stepSize: 15,
                            scaleOverride : true,
                            scaleStepWidth : 15,
                        },
                        scaleLabel: {
                             display: true,
                             labelString: 'Degree',
                             fontSize: 20 
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            fontSize: 12
                        },
                        afterFit: function(scale) {
                            scale.height = 80;
                        }
                        /*scaleLabel: {
                            display: true,
                            labelString: 'Exams',
                            fontSize: 20
                        },*/
                    }]
                },
            legend: {
                    display: false
                },
            animation: {
                duration: 1,
                /*onComplete: function(animation) {
                    console.log('done');
                }*/
            }
        };

        // Chart declaration:
        var myBarChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: options
        });

        Chart.plugins.register({
            beforeDraw: function(chartInstance) 
            {
                var ctx = chartInstance.chart.ctx;

                var chart_height = chartInstance.chart.height;
                var chart_width = chartInstance.chart.width;

                var chart_top_padding = 7;
                var chart_xAxes_height = 80;
                var chart_left_padding = 75;

                var chart_height_padding_perc = .13 * chart_height;

                var chart_height_area = chart_height - chart_xAxes_height - chart_top_padding;

                ctx.fillStyle = "#7abd5e";
                var green_start = chart_top_padding;
                var green_width = .21 * chart_height_area;
                ctx.fillRect(chart_left_padding, green_start, chart_width, green_width);

                ctx.fillStyle = "#459ce9";
                var blue_start = green_width + green_start;
                var blue_width = .15 * chart_height_area;
                ctx.fillRect(chart_left_padding, blue_start, chart_width, blue_width);

                ctx.fillStyle = "#f5c758";
                var orange_start = blue_start + blue_width;
                var orange_width = .19 * chart_height_area;
                ctx.fillRect(chart_left_padding, orange_start, chart_width, orange_width);

                ctx.fillStyle = "#e53535";
                var red_start = orange_start + orange_width;
                var red_width = .45 * chart_height_area;
                ctx.fillRect(chart_left_padding, red_start, chart_width, red_width);
            }
        });
</script>

注意：当我禁用 javascript 时，它工作正常，但肯定没有图表。我在 OS x 上尝试了同样的一切，它工作正常。

请有任何帮助或建议

4

0 回答 0