DataGear 使用静态HTML模板快速制作数据可视化看板

最新推荐文章于 2025-10-15 17:02:15 发布

原创

最新推荐文章于 2025-10-15 17:02:15 发布 · 3.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化 #可视化

本文介绍如何使用DataGear看板通过导入静态HTML模板快速创建数据可视化看板，包括压缩模板、添加图表组件及自定义展示效果的方法。

DataGear看板提供了导入静态HTML模板的功能，使您可以利用已有的任意HTML网页资源快速制作数据可视化看板。
首先，您需要准备一套已设置好布局的静态HTML模板，其中包含的HTML主页及相关资源，例如：

index.html
css/
  |---style.css
  |---images
       |---bg.png
       |---bg_head.png
js/
  |---index.js
  |---common.js

它的静态效果如下图所示：

在这里插入图片描述
然后，将这套静态HTML模板压缩到一个ZIP文件中（注意index.html及其资源要直接放在压缩包的根目录下，不要再多嵌套一级目录），使用DataGear看板的[导入]功能，将这个ZIP文件到入为看板。
导入成功后，打开看板编辑界面，为HTML模板中的div元素添加dg-chart-widget属性绑定图表组件，例如：