Github Page 插入 chart 图表

在写巴黎疫情文章的时候想到可以插入实时数据做成折线图，考虑以前插入过流程图，方法应该一样，但是我的Typora好像不支持直接插入 chart.line，只能自己重新定义 chart 。

1.在文章头部添加 chart：true 。

2.在 footer 里进行判断，如果文章 chart 为 true 则执行 script 。

{\% if page.chart %}
<script type="text/javascript" src="/static/chart.bundle.js"></script>
<script>
    // 获取保存原文中图表代码
    var code = document.getElementsByClassName("language-chart")[0].textContent;
    // 删除原文中代码
    document.getElementsByTagName("pre")[0].innerHTML = "";
    // 设置body padding
    document.getElementsByTagName("body")[0].setAttribute('style','padding-top:'+$("#navi").height()+'px');
    // 画图，style里的设置可以自定义画布大小
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, JSON.parse(code));
    document.getElementById("myChart").setAttribute('style','position: relative;margin: auto;height: 30vh;width: 80vw;');
</script>
{\% endif %}

3.（疑问）我之前定义好画布的位置以及大小，但是图会重新画在body开头，应该是代码顺序有问题。

Chartjs中文手册：https://chartjs-doc.abingoal.com/

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。