DataGear 自定义数据可视化看板的图表主题
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'
}">
对应的效果图如下：
源码地址：
Gitee：https://gitee.com/datagear/datagear
Github：https://github.com/datageartech/datagear
DataGear 自定义数据可视化看板的图表主题的更多相关文章
- Echarts数据可视化，easyshu图表集成。
介绍: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Sa ...
- 类似阿里双十一的可视化看板是怎么做的？无人机三维GIS看板也来了！
天猫双十一数据可视化看板 每年的双十一,天猫都会在整点时刻直播战绩,惊叹于可怕战绩的同时,也会被背后展示的数据大屏吸引,这样让人眼前一亮的可视化数据看板是怎么做出来的? 所谓可视化数据看板,就是挂在墙 ...
- PoPo数据可视化周刊第5期
PoPo数据可视化 聚焦于Web数据可视化与可视化交互领域,发现可视化领域有意思的内容.不想错过可视化领域的精彩内容, 就快快关注我们吧 :) World Wire 数据可视化演示(视频) IBM公司 ...
- 使用bokeh-scala进行数据可视化(2)
目录 前言 几种高级可视化图表 总结 一.前言 之前已经简单介绍过一次如何使用Bokeh-scala进行数据可视化(见使用bokeh-scala进行数据可视化),以及如何在Geotrel ...
- 百度数据可视化图表套件echart实战
最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...
- Python调用matplotlib实现交互式数据可视化图表案例
交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...
- 数据可视化图表ECharts
介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...
- 2018年最佳JavaScript数据可视化和图表库
现在有很多图表库,但哪一个最好用?这可能取决于许多因素,如业务需求,数据类型,图表本身的目的等等.在本文中,每个JavaScript图表库将与一些关键因素进行比较,包括图表类型,商业或免费和开源状态. ...
- 数据分析 | 数据可视化图表，BI工具构建逻辑
本文源码:GitHub·点这里 || GitEE·点这里 一.数据可视化 1.基础概念 数据可视化,是关于数据视觉表现形式的科学技术研究.其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽取出 ...
- 数据可视化之 图表篇（四） 那些精美的Power BI可视化图表
之前使用自定义图表,每次新打开一个新文件时,都需要重新添加,无法保存,在PowerBI 6月更新中,这个功能得到了很大改善,可以将自定义的图表固定在内置图表面板上了. 添加自定义图表后,右键>固 ...
随机推荐
- STM32CubeMX教程24 WDG - 独立窗口看门狗
1.准备材料 开发板(正点原子stm32f407探索者开发板V2.4) STM32CubeMX软件(Version 6.10.0) 野火DAP仿真器 keil µVision5 IDE(MDK-Arm ...
- 小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
在element-ui中 单选框的v-model的值最好是一个字符串 否者可能不能够进行数据回填哈 单选框 的类型必须是字符串类型哈 在elemnet-ui中 如果你想从A页面拿到B页面中的值 可以有 ...
- 【一个小发现】VictoriaMetrics 中 vmselect 的 `-search.denyPartialResponse` 选项不应该开启
作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 一直以为vmselect 的 -search.denyPa ...
- 解锁ChatGLM-6B的潜力：优化大语言模型训练，突破任务困难与答案解析难题
解锁ChatGLM-6B的潜力:优化大语言模型训练,突破任务困难与答案解析难题 LLM(Large Language Model)通常拥有大量的先验知识,使得其在许多自然语言处理任务上都有着不错的性能 ...
- 强化学习调参技巧一： DDPG算法训练动作选择边界值_分析解决
1.原因: 选择动作值只在-1 1之间取值 actor网络输出用tanh,将动作规范在[-1,1],然后线性变换到具体的动作范围.其次,tanh激活区是有范围的,你的预激活变量(输入tanh的)范围太 ...
- 19.3 Boost Asio 多线程通信
多线程服务依赖于两个通用函数,首先boost::bind提供了一个高效的.简单的方法来创建函数对象和函数对象适配器,它的主要功能是提供了一种将函数和它的参数绑定到一起的方法,这种方法可以将具有参数的成 ...
- 随机 Transformer
在这篇博客中,我们将通过一个端到端的示例来讲解 Transformer 模型中的数学原理.我们的目标是对模型的工作原理有一个良好的理解.为了使内容易于理解,我们会进行大量简化.我们将减少模型的维度,以 ...
- How to 充分利用你的服务器
服务器高性能计算指南 本文处于preview阶段,内容并不完全严谨,如有错误敬请原谅,适当参考. 目录 服务器高性能计算指南 什么样的计算适合当前服务器? 从CPU架构入手 两个CPU带来的影响 那么 ...
- 【可观测性系列】 Opentelemetry 介绍
作者简介:大家好,我是蓝胖子 ️博客首页:博客园主页蓝胖子的编程梦 每日一句:人生的烦恼,多在于明白的太多,而做的太少 大家好,我是蓝胖子,随着微服务的流行,服务的可观测性概念被越来越多人提及到,究竟 ...
- 201871010111-刘佳华 实验三 结对项目—《D{0-1}KP 实例数据集算法实验平台》项目报告
实验三 软件工程结对项目 ========== 时间:2021-4-1 项目 内容 课程班级博客链接 课程链接 这个作业要求链接 作业要求 我的课程学习目标 1.了解软件工程过程中结对项目的开发流程 ...