可在 Jimdo 中通过四种方法嵌入动态图表:一、用 Chart.js CDN 在 html 区块中直接渲染;二、iframe嵌入外部托管图表页;三、调用 google Charts API;四、用 Datawrapper 等 工具 将表格转为嵌入式图表。

如果您在 Jimdo 网站中希望展示动态、交互式数据可视化图表,但默认编辑器不支持直接插入 html5 图表代码,则需通过自定义 HTML 片段引入外部图表库并绑定数据。以下是实现该目标的多种方法:
一、使用 Chart.js 库通过自定义 HTML 块插入
Chart.js 是轻量级、响应式 HTML5 图表库,兼容 Jimdo 的嵌入机制,可通过 CDN 引入并在页面中动态渲染图表。需确保 Jimdo 允许执行内联脚本(部分 Jimdo 计划限制 script 标签,需使用“高级 HTML”或“自定义代码区块”功能)。
1、登录 Jimdo Creator 后台,进入需添加图表的页面编辑模式。
2、在页面编辑区点击“+ 添加区块”,选择“HTML”或“自定义代码”区块(名称依 Jimdo 版本略有差异)。
立即学习 “ 前端免费学习笔记(深入)”;
3、在代码框中粘贴以下完整代码片段(含 CDN 引用与示例柱状图):
<script><br>const ctx = document.getElementById(‘myChart’).getContext(‘2d’);<br>new Chart(ctx, {<br> type: ‘bar’,<br> data: {<br> labels: [‘ 一月 ’, ‘ 二月 ’, ‘ 三月 ’],<br> datasets: [{<br> label: ‘ 销售额(万元)’,<br> data: [12, 19, 3],<br> backgroundColor: ‘rgba(54, 162, 235, 0.2)’,<br> borderColor: ‘rgba(54, 162, 235, 1)’,<br> borderWidth: 1<br> }]<br> },<br> options: {responsive: true, maintainAspectRatio: false}<br>});<br></script>
4、保存区块 并发 布网站。图表将在页面加载时自动渲染。
二、通过 iframe 嵌入外部托管的 HTML5 图表页面
若 Jimdo 主动屏蔽内联 script 或 canvas 标签,可将图表单独部署为独立 HTML 文件(如托管于 gitHub Pages、Vercel 或任意静态服务器),再以 iframe 方式嵌入,完全规避 Jimdo 的脚本执行限制。
1、创建一个包含 Chart.js 或 ApexCharts 的独立 HTML 文件,并上传至公开可访问的域名或子路径(例如 https://yourdomain.com/chart.html)。
2、确认该页面可通过 浏览器 直接打开且图表正常显示。
3、在 Jimdo 编辑器中添加“HTML”区块,输入以下 iframe 代码:
4、调整 width 和 height 值适配响应式布局,建议 height 至少设为 250px 以保证图表完整可见。
三、使用 Google Charts API(无需本地库依赖)
Google Charts 提供基于纯 javaScript 的图表服务,仅需加载其 loader.js 并调用 draw 函数,适合 Jimdo 中对第三方库引用控制较严的环境,且支持 异步 加载避免阻塞。
1、在 Jimdo“HTML”区块中插入以下代码: