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. 一条sql了解MYSQL的架构设计

    1 前言 对于一个服务端开发来说 MYSQL 可能是他使用最熟悉的数据库工具,然而,大部分的Java工程师对MySQL的了解和掌握程度,大致就停留在这么一个阶段:它可以建库.建表.建索引,然后就是对里 ...

  2. 你也能成为“黑客”高手——趣谈Linux Shell编程语言

    作者:京东零售 杜兴文 我们看过很多在电脑命令行敲一些命令并给观众展示很高科技的画面感的电影,比如<盗梦空间><操作系统革命><代码>等等, 再想想电影黑客帝国中的 ...

  3. elementui中自定义Select选择器样式自定义

    <el-select class="my-el-select" v-model="tenantCont" placeholder="请输入机构标 ...

  4. vue数据不响应，可能是用法有问题

    <template> <div> <div> <span>用户名: {{ userInfo.name }}</span> <span& ...

  5. 在K8S中，静态、动态、自主式Pod有何区别？

    在Kubernetes(简称K8s)中,静态Pod.自主式Pod和动态Pod是不同管理方式下的Pod类型,它们的区别主要体现在创建和管理方式上: 静态Pod: 静态Pod是由kubelet直接管理的, ...

  6. Git的使用（一）：创建本地仓库并在其中添加、修改、删除文件

    创建本地版本库 版本库又名仓库,英文名repository,可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以追踪历史,或者 ...

  7. 使用Navicat 进行MySql数据库同步功能

    使用Navicat 进行MySql数据库同步功能 作者:胡德安 准备: 打开Navicat管理工具(比如Navicat Premium 15管理工具) 两个数据库第一个是源数据库A和要被同步的目标数据 ...

  8. 提高Unity编译dll的速度

    前言 我们有一个Unity纯C#开发的mmo项目(使用ILRuntime热更,开发阶段跑纯C#),在开发到后期之后,每次修改C#代码编译时间在25秒左右,这部分的等待时间是很长的, 我在想有没有办法可 ...

  9. vim 从嫌弃到依赖(6)——插入模式

    插入模式是vim中主要用来处理输入的一种模式,在这种模式中,用户的输入的字符会显示在窗口中.该模式中的行为与在普通编辑器中输入类似.由于在该模式中输入的字符会被当做有效输入,因此该模式下涉及的到命令也 ...

  10. MySQL 存储过程与函数(精简笔记)

    MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RD ...