手绘图表JS chart.xkcd
先给WordPress在Docker文件夹中创建一个files的文件夹专门用来放置文件
比如下面要演示的手绘图表JS chart.xkcd
后续访问文件夹就是域名/files/文件名,如
https://dsx2025.blog/files/chart.xkcd.min.js
因为在WordPress管理后台,上传媒体文件,除了图片,视频外,无法上传其他类型文件,比如js代码
上传时不支持此类型
官网github地址:
https://github.com/timqian/chart.xkcd
下面的官网演示代码
可以在移动端或者pc端查看,pc端可以使用鼠标点击查看图表交互效果
百度echats图表
一个是可爱手绘图表,一个是开源免费好用的图表(种类更多)
本文js
https://dsx2025.blog/files/echarts.min.js
官网实例
同样的也可以在移动端或者PC点击和查看
Tips
上面只是自定义Html的一种用法
一方面演示了在WordPress中上传files文件相关的内容
一个方面演示了在WordPress中添加自定义Html设置可视化图表的方法
还可以设置3D,VR,AR,其他图形内容,和前端代码相关的,不过和文章比较接近的也就是图表内容
相对于静态图片,可视化图表多了交互,更加清晰和有用
