DataGear 看板的 dg-chart-theme 属性，提供了简单且强大的自定义图表主题功能。

通常，只需要设置其color、backgroundColor、actualBackgroundColor值即可，看板会根据它们自动生成标题、图例、提示框、高亮框等相关配色。

例如，在<body>元素上定义全局图表配色：

<body style="background-color: #17336c"

    dg-chart-theme="{

		color:'#FFF',

		backgroundColor:'#17336c',

		borderWidth:'2px'

	}">

对应的效果图如下：

当看板有背景图片时，通常希望图表背景色是透明的，此时应设置actualBackgroundColor为与背景图片一致的颜色，例如：

<body style="background-image: url(bg.png)"

    dg-chart-theme="{

		color:'#FFF',

		backgroundColor:'transparent',

		actualBackgroundColor:'#17336c',

		borderWidth:'2px'

	}">

也可以为单个图表<div>元素添加dg-chart-theme属性，仅定义此图表的主题，例如：

<div dg-chart-widget="..."

	dg-chart-theme="{backgroundColor:'green',color:'yellow'}">

</div>

对应的效果图如下（第一个图表）：

另外，设置dg-chart-theme的graphColors值，可以自定义图表系列条目颜色序列，设置graphRangeColors值，则可以定义图表值域映射颜色（地图区域颜色），例如：

<body style="background-image: url(bg.png)"

    dg-chart-theme="{

		color:'#FFF',

		backgroundColor:'transparent',

		actualBackgroundColor:'#17336c',

		graphColors: ['#EE7942', '#FFFF00', '#EE1289'],

		graphRangeColors: ['#FFFF00', '#EE7942'],

		borderWidth:'2px'

	}">

对应的效果图如下：

官网地址：http://www.datagear.tech

源码地址：

Gitee：https://gitee.com/datagear/datagear

Github：https://github.com/datageartech/datagear

DataGear 自定义数据可视化看板的图表主题的更多相关文章

  1. Echarts数据可视化，easyshu图表集成。

      介绍: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Sa ...

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

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

  3. PoPo数据可视化周刊第5期

    PoPo数据可视化 聚焦于Web数据可视化与可视化交互领域,发现可视化领域有意思的内容.不想错过可视化领域的精彩内容, 就快快关注我们吧 :) World Wire 数据可视化演示(视频) IBM公司 ...

  4. 使用bokeh-scala进行数据可视化(2)

    目录 前言 几种高级可视化图表 总结 一.前言        之前已经简单介绍过一次如何使用Bokeh-scala进行数据可视化(见使用bokeh-scala进行数据可视化),以及如何在Geotrel ...

  5. 百度数据可视化图表套件echart实战

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

  6. Python调用matplotlib实现交互式数据可视化图表案例

    交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...

  7. 数据可视化图表ECharts

    介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...

  8. 2018年最佳JavaScript数据可视化和图表库

    现在有很多图表库,但哪一个最好用?这可能取决于许多因素,如业务需求,数据类型,图表本身的目的等等.在本文中,每个JavaScript图表库将与一些关键因素进行比较,包括图表类型,商业或免费和开源状态. ...

  9. 数据分析 | 数据可视化图表，BI工具构建逻辑

    本文源码:GitHub·点这里 || GitEE·点这里 一.数据可视化 1.基础概念 数据可视化,是关于数据视觉表现形式的科学技术研究.其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽取出 ...

  10. 数据可视化之 图表篇（四） 那些精美的Power BI可视化图表

    之前使用自定义图表,每次新打开一个新文件时,都需要重新添加,无法保存,在PowerBI 6月更新中,这个功能得到了很大改善,可以将自定义的图表固定在内置图表面板上了. 添加自定义图表后,右键>固 ...

随机推荐

  1. [转帖]使用 Crash 工具分析 Linux dump 文件

    前言 Linux 内核(以下简称内核)是一个不与特定进程相关的功能集合,内核的代码很难轻易的在调试器中执行和跟踪.开发者认为,内核如果发生了错误,就不应该继续运行.因此内核发生错误时,它的行为通常被设 ...

  2. [转帖]/etc/passwd文件 各个字段详解

    转载自:https://www.sohu.com/a/320177323_505901 /etc/passwd文件: 系统用户配置文件,存储了系统中所有用户的基本信息,并且所有用户都可以对此文件执行读 ...

  3. [转帖]Native Memory Tracking 详解（3）:追踪区域分析(二)

    https://www.modb.pro/db/539804 上篇文章 Native Memory Tracking 详解(2):追踪区域分析(一) 中,分享了NMT追踪区域的部分内存类型--Java ...

  4. CS231N Assignment1 softmax 笔记

    -为Softmax分类器实现完全矢量化的损失函数 -实现解析梯度完全矢量化的表达式 使用数值梯度检查实现结果 使用验证集调整学习率和正则化强度 使用SGD优化损失函数 可视化最终学习的权重 softm ...

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

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

  6. VictoriaMetrics 1.73.1 值得关注的新特性

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu 公众号:一本正经的瞎扯 VictoriaMetrics 1.73.1 的changelog: h ...

  7. 【JS 逆向百例】你没见过的社会主义核心价值观加密

    关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后 ...

  8. LyScript 计算片段Hash并写出Excel

    本案例将学习运用LyScript计算特定程序中特定某些片段的Hash特征值,并通过xlsxwriter这个第三方模块将计算到的hash值存储成一个excel表格,本例中的知识点可以说已经具备了简单的表 ...

  9. LyScriptTools 扩展Script类API手册

    纯脚本类的功能实现都是调用的x64dbg命令,目前由于run_command_exec()命令无法返回参数,故通过中转eax寄存器实现了取值,目前只能取出整数类型的参数. 插件地址:https://g ...

  10. 设计模式-2 简单工厂模式Factory Method

    设计模式-2 简单工厂模式 1 意图: 定义一个用户创建对象的接口,让子类决定实例化那个类.Factory Method使一个类的实例化延迟到其子类 使用场景:将一个类的实例化延迟到其子类结构: 优缺 ...