跳到主要内容

图表

bkhtmltopdf 内置 <chart> 自定义标签，用于生成图表。它继承自标准 <img> 标签，因此支持 style、class、alt 等属性，同时覆盖了 src、width 和 height 属性，便于动态生成。

提示

图表功能依赖 Apache ECharts 和 Chart.js，您可以参考官方的 示例项目 以快速入手。

属性​

属性类型描述默认值
srcstring数据来源（引用 <script> 的 id）
widthnumber图表宽度（单位：px）512
heightnumber图表高度（单位：px）512
enginestring图表引擎，支持：echarts chart.jsecharts
注意

请注意，width 和 height 属性用于控制图表的实际渲染尺寸。 如果仅需调整显示大小，建议使用 style 或 class 来控制样式。

示例​

<chart> 标签的 src 属性用于关联图表数据，数据需定义在对应的 <script> 标签中。 脚本类型仅支持：application/json5 和 application/json。

ECharts​

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Hi, bkhtmltopdf!</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>

<chart src="chart-1" width="500" height="500" alt="This is a chart"/>
<chart src="chart-2" width="500" height="500" alt="This is a chart"/>

<script id="chart-1" type="application/json5">
    {xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},series:[{data:[150,230,224,218,135,147,260],type:'line'}]}
</script>

<script id="chart-2" type="application/json">
    {"color":["#80FFA5","#00DDFF","#37A2FF","#FF0087","#FFBF00"],"title":{"text":"Gradient Stacked Area Chart"},"tooltip":{"trigger":"axis","axisPointer":{"type":"cross","label":{"backgroundColor":"#6a7985"}}},"legend":{"data":["Line 1","Line 2","Line 3","Line 4","Line 5"]},"toolbox":{"feature":{}},"xAxis":[{"type":"category","boundaryGap":false,"data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}],"yAxis":[{"type":"value"}],"series":[{"name":"Line 1","type":"line","stack":"Total","smooth":true,"lineStyle":{"width":0},"showSymbol":false,"areaStyle":{"opacity":0.8},"emphasis":{"focus":"series"},"data":[140,232,101,264,90,340,250]},{"name":"Line 2","type":"line","stack":"Total","smooth":true,"lineStyle":{"width":0},"showSymbol":false,"areaStyle":{"opacity":0.8},"emphasis":{"focus":"series"},"data":[120,282,111,234,220,340,310]},{"name":"Line 3","type":"line","stack":"Total","smooth":true,"lineStyle":{"width":0},"showSymbol":false,"areaStyle":{"opacity":0.8},"emphasis":{"focus":"series"},"data":[320,132,201,334,190,130,220]},{"name":"Line 4","type":"line","stack":"Total","smooth":true,"lineStyle":{"width":0},"showSymbol":false,"areaStyle":{"opacity":0.8},"emphasis":{"focus":"series"},"data":[220,402,231,134,190,230,120]},{"name":"Line 5","type":"line","stack":"Total","smooth":true,"lineStyle":{"width":0},"showSymbol":false,"label":{"show":true,"position":"top"},"areaStyle":{"opacity":0.8},"emphasis":{"focus":"series"},"data":[220,302,181,234,210,290,150]}]}
</script>
</body>
</html>

在线运行

信息

application/json5 的支持并不全面，我们仍建议优先使用 application/json。

效果​

Chart preview

Chart.js​

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Hi, bkhtmltopdf!</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>

<chart src="chart-1" engine="chart.js" width="500" height="500" alt="This is a chart"/>
<chart src="chart-2" engine="chart.js" width="500" height="500" alt="This is a chart"/>

<script id="chart-1" type="application/json5">
    {"type":"line","data":{"labels":["Red","Blue","Yellow","Green","Purple","Orange"],"datasets":[{"label":"# of Votes","data":[12,19,3,5,2,3],"borderColor":"red"}]}}
</script>

<script id="chart-2" type="application/json">
    {"type":"radar","data":{"labels":["Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"],"datasets":[{"label":"My First Dataset","data":[65,59,90,81,56,55,40],"fill":true,"backgroundColor":"rgba(255, 99, 132, 0.2)","borderColor":"rgb(255, 99, 132)","pointBackgroundColor":"rgb(255, 99, 132)","pointBorderColor":"#fff","pointHoverBackgroundColor":"#fff","pointHoverBorderColor":"rgb(255, 99, 132)"},{"label":"My Second Dataset","data":[28,48,40,19,96,27,100],"fill":true,"backgroundColor":"rgba(54, 162, 235, 0.2)","borderColor":"rgb(54, 162, 235)","pointBackgroundColor":"rgb(54, 162, 235)","pointBorderColor":"#fff","pointHoverBackgroundColor":"#fff","pointHoverBorderColor":"rgb(54, 162, 235)"}]},"options":{"elements":{"line":{"borderWidth":3}}}}
</script>
</body>
</html>

在线运行

预览​

Chart preview

脚本​

图表数据仅支持静态的 JSON 或 JSON5 格式， 不支持执行 JavaScript 脚本或动态代码。