DataGear 看板提供了导入静态 HTML 模板的功能，使您可以利用已有的任意 HTML 网页资源快速制作数据可视化看板。

首先，您需要准备一套已设置好布局的静态 HTML 模板，其中包含的 HTML 网页及相关资源，例如：

index.html

css/

  |---style.css

  |---images

       |---bg.png

       |---bg_head.png

js/

  |---index.js

  |---common.js

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

然后，将这套静态 HTML 模板压缩到一个 ZIP 文件中，使用 DataGear 看板的【导入】功能，将这个 ZIP 文件到入为看板。

导入成功后，打开看板编辑界面，为 HTML 模板中的 div 元素添加 dg-chart-widget 属性绑定图表组件，例如：

...

<div class="panel-content" dg-chart-widget="图表组件ID"></div>

...

其中，图表组件ID是图表管理列表中的一个图表条目ID。

设置完所有的 div 元素后，一个数据可视化看板就制作完成了，点击【保存并展示】 按钮，即可查看展示效果。

等等，默认的展示效果差强人意……，没关系，自定义展示效果也很简单！

首先，自定义图表主题，打开看板编辑界面，为 <body> 标签添加 dg-chart-theme 自定义图表主题，如下代码：

<body dg-chart-theme="{color:'#F0F0F0',backgroundColor:'transparent',actualBackgroundColor:'#050d3c'}" >

然后，自定义图表设置项，为 <body> 标签添加 dg-chart-options 属性，定义全局图表设置项：

<body ... dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}">

<!--隐藏标题、图例顶部展示、坐标系距顶部25像素，具体参考echarts设置项-->

大功告成！

DataGear 使用静态HTML模板制作数据可视化看板的更多相关文章

  1. 数据可视化地图制作教程，这个免费BI软件轻松搞定

    ​数据可视化地图制作教程 现在做数据分析基本上离不开数据可视化,在大量的数据中,有很大一部分数据都与地理信息相关,因此,在数据可视化中,可视化地图是非常重要的一部分.无论是新闻报道,还是商业分析报告, ...

  2. 第六篇：R语言数据可视化之数据分布图（直方图、密度曲线、箱线图、等高线、2D密度图）

    数据分布图简介 中医上讲看病四诊法为:望闻问切.而数据分析师分析数据的过程也有点相似,我们需要望:看看数据长什么样:闻:仔细分析数据是否合理:问:针对前两步工作搜集到的问题与业务方交流:切:结合业务方 ...

  3. Excel数据可视化图表设计需要注意的几个问题

    ​大数据发展迅速的时代,数据分析驱动商业决策.对于庞大.无序.复杂的数据要是没经过合适的处理,价值就无法体现. 可以想象一本没有图片的教科书.没有图表.图形或是带有箭头和标签的插图或流程图,那么这门学 ...

  4. BI工具数据可视化效果哪家强？我选这款！

    BI工具是商业智能(Business Intelligence)软件的英文缩写.目前,商业智能通常被理解为将企业中现有的数据转化为知识,帮助企业做出明智的业务经营决策的工具. 企业经常会为如何选择BI ...

  5. 类似阿里双十一的可视化看板是怎么做的？无人机三维GIS看板也来了！

    天猫双十一数据可视化看板 每年的双十一,天猫都会在整点时刻直播战绩,惊叹于可怕战绩的同时,也会被背后展示的数据大屏吸引,这样让人眼前一亮的可视化数据看板是怎么做出来的? 所谓可视化数据看板,就是挂在墙 ...

  6. 利用R语言制作出漂亮的交互数据可视化

    利用R语言制作出漂亮的交互数据可视化 利用R语言也可以制作出漂亮的交互数据可视化,下面和大家分享一些常用的交互可视化的R包. rCharts包 说起R语言的交互包,第一个想到的应该就是rCharts包 ...

  7. 数据可视化之 图表篇（二）如何用Power BI制作疫情地图？

    丁香园制作的这个地图可视化,相信大家每天都会看好几遍,这里不讨论具体数据,仅来探讨一下PowerBI地图技术. 这个地图很简洁,主要有三个特征: 1,使用着色地图,根据数据自动配色 2,只显示中国地图 ...

  8. Python 爬取 热词并进行分类数据分析-[云图制作+数据导入]

    日期:2020.01.28 博客期:136 星期二 [本博客的代码如若要使用,请在下方评论区留言,之后再用(就是跟我说一声)] 所有相关跳转: a.[简单准备] b.[云图制作+数据导入](本期博客) ...

  9. 【Ecmall】ECMall2.x模板制作入门系列（认识ECMall模板）

    ECMall2.x模板制作入门系列之1(认识ECMall模板) 从ECMall2.0全新架构发布以来,随着版本的不断更新,ECMall已经逐渐走向一个稳定时期,是时候整理一些实用教程了.下面给大家带来 ...

  10. D3js初探及数据可视化案例设计实战

    摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...

随机推荐

  1. [转帖] Linux查看日志文件写入速度的4种方法

    https://www.cnblogs.com/codelogs/p/16365448.html 简介# 有时,我们需要查看某个文件的增长速度,如日志文件,以此来感受系统的负载情况,因为一般情况下,日 ...

  2. XCODE IOS 静态链接库替换升级

    XCODE 版本15.2. 一个很久需求没更新的IOS 应用,近来有新需求要开发. 拉下代码运行,出现了个BAD_ACCESS错误.出错的位置位于一个调用的第三方的.a静态库内部.因为调用代码并没有修 ...

  3. js中for in和for of详细讲解

    for in的详细讲解, for in遍历数组的毛病 1.index索引为字符串型数字,不能直接进行几何运算. 2.遍历顺序有可能不是按照实际数组的内部顺序 3.使用for in会遍历数组[所有的可枚 ...

  4. 【代码分享】使用 avx2 + 查表法，优化凯撒加密

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 接上一篇:[代码分享]使用 avx512 + 查表法,优化 ...

  5. [1] 以逆向的角度来看流程控制语句——if

    [1] 以逆向的角度来看流程控制语句--if 1. if语句(单分支) ​ if语句转换的条件跳转指令与if语句的判断结果是相反的, 因为C语言是根据代码行的位置决定编译后二进制代码地址高低的,即低行 ...

  6. 推荐系统[四]：精排-详解排序算法LTR (Learning to Rank)_ poitwise, pairwise, listwise相关评价指标，超详细知识指南。

    0.前言召回排序流程策略算法简介 推荐可分为以下四个流程,分别是召回.粗排.精排以及重排: 召回是源头,在某种意义上决定着整个推荐的天花板: 粗排是初筛,一般不会上复杂模型: 精排是整个推荐环节的重中 ...

  7. Flask 实现文件上传下载

    Flask 针对文件的上传下载相关代码片段,多种方法,包括限制文件格式,大小等. 实现图片文件上传 # name: 简单的实现文件上传任务. import os from flask import F ...

  8. Walrus 实用教程｜Walrus + Gitlab，打通CI/CD 自动化交付！

    Walrus file 是 Walrus 0.5 版本推出的新功能,用户可以通过一个非常简洁的 YAML 描述应用或基础设施资源的部署配置,然后通过 Walrus CLI 执行 walrus appl ...

  9. STL源码剖析 | priority_queue优先队列底层模拟实现

    今天博主继续带来STL源码剖析专栏的第四篇博客了! 今天带来优先队列priority_queue的模拟实现!话不多说,直接进入我们今天的内容! 前言 那么这里博主先安利一下一些干货满满的专栏啦! 手撕 ...

  10. CF1764H Doremy's Paint 2 题解

    题目链接:CF 或者 洛谷 高分题,感觉挺有意思的题,值得一提的是这个题的 \(1\) 和 \(3\) 版本却是两个基础题. 一开始以为跟这道差不多:P8512 [Ynoi Easy Round 20 ...