Wkhtmltopdf does not render Chart.JS 2.5.0 graph<\/a><\/li>\n<\/ul>\n\u7d50\u8ad6\uff1a\u53ea\u8981\u4f7f\u7528 wkhtmltopdf 0.12.6 \u4e4b\u5f8c\u7684\u7248\u672c\u61c9\u8a72\u5c31\u6bd4\u8f03\u6c92\u554f\u984c<\/p>\n
--<\/p>\n
$HTML = <<<HTML\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/2.3.0\/Chart.min.js\"><\/script>\r\n<style>\r\n .reportGraph {width:900px}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div>\u77e5\u8b58\u6982\u5ff5\u5206\u6790<\/div>\r\n<div id=\"chart1_box\" class=\"reportGraph\">\r\n <canvas id=\"chart1\"><\/canvas>\r\n<\/div>\r\n\r\n<div>\u8a8d\u77e5\u5411\u5ea6\u5206\u6790<\/div>\r\n<canvas id=\"chart2\"><\/canvas>\r\n\r\n<div>\u984c\u578b\u80fd\u529b\u5206\u6790<\/div>\r\n<canvas id=\"chart3\"><\/canvas>\r\n \r\n<div class=\"reportGraph\"><canvas id=\"canvas\"><\/canvas><\/div>\r\n\r\n<script>\r\nfunction drawGraphs() {\r\n new Chart(\r\n document.getElementById(\"chart1\"), {\r\n type: 'horizontalBar',\r\n data: {\r\n labels: [\"\u7d55\u5c0d\u503c\", \"\u6578\u7dda\u4e0a\u5169\u9ede\u7684\u8ddd\u96e2\", \"\u6578\u7684\u5927\u5c0f\", \"\u6578\u7dda\", \"\u6b63\u6578\u8207\u8ca0\u6578\"],\r\n datasets: [{\r\n label: '\u7b54\u5c0d\u984c\u7387%',\r\n backgroundColor: 'rgb(113, 123, 237)',\r\n borderColor: 'rgb(113, 123, 237)',\r\n data: [0, 20, 33, 25, 50],\r\n }]\r\n },\r\n options: {\r\n maintainAspectRatio: false,\r\n animation: false,\r\n scales: {\r\n xAxes: [{\r\n ticks: {\r\n min: 0,\r\n max: 100,\r\n stepSize: 10\r\n }\r\n }]\r\n }\r\n },\r\n }\r\n );\r\n}\r\nwindow.onload = function() {\r\n drawGraphs();\r\n};\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\nHTML;\r\n<\/pre>\n\u6210\u679c<\/p>\n
![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2022\/10\/20221027_134627-1024x517.png\")
<\/p>\n
--<\/p>\n
\u9664\u932f<\/h2>\n
\u5982\u679c\u767c\u73fe\u6c92\u6709\u5716\u986f\u793a\uff0c\u53ef\u4ee5\u671d\u5169\u500b\u65b9\u5411\u9664\u932f<\/p>\n
\n- <div> \u5bb9\u5668\u662f\u5426\u6709\u8a2d\u5b9a\u5bec\u5ea6 width: 900px<\/li>\n
- \u751f\u6210\u8cc7\u6599\u9700\u8981\u6642\u9593 wkhtmltopdf \u52a0\u4e0a --javascript-delay \u8a66\u8a66\u770b\uff0c\u9810\u8a2d\u662f 200ms \u5982\u679c\u751f\u6210\u8cc7\u6599\u4e0d\u5920\u5feb\u5c31\u9069\u5ea6\u5ef6\u9577<\/li>\n<\/ol>\n
--<\/p>\n
<\/div>\n