Chart.js PHP上的wkhtmltopdf无法与JS一起使用，但出现以下错误：“；libpng警告：iCCP:已知错误的sRGB配置文件“；及；分段故障“；

亲爱的， 当我尝试使用带有rendering Chart.JS Graph的phpwkhtmltopdf将HTML转换为PDF时，出现以下错误消息：

加载页面（1/6）
[>]0%
[=======>]10%
[=============>]>29%
[======================>]41%
libpng警告：iCCP:已知错误的sRGB配置文件
[==========================> ] 44 [====================================================> ] 88 [===================================================================================================]100%
分段故障（堆芯转储）

我用过：

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

WKHTMLTBDF版本0.12.4

Phpwkhtmltopdf:

Chart.js版本：2.5.0

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

var canvas=document.getElementById（“条形图”）；
var ctx=canvas.getContext（'2d'）；
ctx.canvas.width=600；
ctx.canvas.height=300；
//全球选择：
Chart.defaults.global.defaultFontColor='黑色'；
Chart.defaults.global.defaultFontSize=14；
风险值数据={
标签：[”、“主题3”、“主题1”、“主题2”、“主题3]，
数据集：[{
标签：“学位”，
填充：假，
线张力：0，
背景色：“rgba（0,0,0,0）”，
边框颜色：“黑色”，//主线颜色
borderCapStyle:“line”，
borderDash:[]，//例如，试试[5,15]
borderDashOffset:0.0，
borderJoinStyle:'斜接'，
pointBorderColor:“黑色”，
pointBackgroundColor:“白色”，
点边界宽度：2，
点半径：8，
pointHoverBackgroundColor:“白色”，
pointHoverBorderColor:“白色”，
pointHoverBorderWidth:2，
点半径：4，
点半径：10，
数据：[null，29,40,40,null]，
斯潘：是的
}]
};
变量选项={
回答：是的，
MaintaintAspectRatio:false，
比例：{
雅克斯：[{
滴答声：{
最高：100，
分:0,，
步长：15，
scaleOverride：对，
刻度宽度：15，
},
scaleLabel：{
显示：对，
标签字符串：“度”，
尺寸：20
}
}],
xAxes：[{
滴答声：{
字体大小：12
},
后装配：功能（比例）{
刻度高度=80；
}
/*scaleLabel：{
显示：对，
标签串：“考试”，
尺寸：20
},*/
}]
},
图例：{
显示：假
},
动画：{
持续时间：1，
/*onComplete：函数（动画）{
console.log（'done'）；
}*/
}
};
//图表声明：
var myBarChart=新图表（ctx{
键入：“行”，
数据：数据，
选项：选项
});
Chart.plugins.register({
beforeDraw:函数（chartInstance）
{
var ctx=chartInstance.chart.ctx；
var chart_height=chartInstance.chart.height；
var chart_width=chartInstance.chart.width；
var图表顶部填充=7；
var图表高度=80；
var图表左填充=75；
var图表高度填充百分比=.13*图表高度；
变量图表高度区域=图表高度-图表高度-图表顶部填充；
ctx.fillStyle=“#7abd5e”；
var green\u start=图表\u顶部\u填充；
变量绿色宽度=.21*图表高度区域；
ctx.fillRect（图表左填充、绿色开始、图表宽度、绿色宽度）；
ctx.fillStyle=“#459ce9”；
var蓝色\u开始=绿色\u宽度+绿色\u开始；
var blue\u width=.15*图表高度\u区域；
ctx.fillRect（图表左填充、蓝色起始、图表宽度、蓝色宽度）；
ctx.fillStyle=“#f5c758”；
变量orange\u start=蓝色\u start+蓝色\u宽度；
var orange\u width=.19*图表高度\u区域；
ctx.fillRect（图表左填充、橙色起始、图表宽度、橙色宽度）；
ctx.fillStyle=“#e53535”；
var red_start=橙色_start+橙色_宽度；
var red_WITH=.45*图表高度_区域；
ctx.fillRect（图表左填充、红色起始、图表宽度、红色宽度）；
}
});

注意：当我禁用javascript时，它工作正常，但没有图表。 我在OS x上尝试了这个，一切都一样，效果很好。

---

任何帮助或建议，请

I fixed，并使用wkhtmltopdf和php在pdf上呈现chart.js:）I fixed，并使用wkhtmltopdf和php在pdf上呈现chart.js:）

<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>