DataGear 制作自定义柱状图条目颜色的数据可视化看板
DataGear 看板提供了dg-chart-options图表选项配置功能，可自定义样式、位置、显示内容等图表选项，其中的processUpdateOptions回调函数配置项，可以在图表更新数据前以编程方式处理图表更新选项。
本文以柱状图为例，介绍如何使用processUpdateOptions配置项，制作自定义柱状图条目颜色的数据可视化看板。
首先，定义CSV数据集：
名称, 数值
a, 5
b, 18
c, 13
d, 9
e, 6
然后，定义图表：
图表类型：基本柱状图
数据集：
名称 -> 名称 (name)
数值 -> 数值 (value)
然后，新建看板，在可视模式下插入上述图表：
然后，切换至源码模式，插入自定义柱状图条目颜色的JavaScript源码，如下所示：
<!DOCTYPE html>
<html>
...
<script>
var normalValueTop = 15;
var normalValueBottom = 8;
var options=
{
processUpdateOptions: function(updateOptions, chart, results)
{
//series结构参考ECharts官网配置项文档
var series0Data = updateOptions.series[0].data;
for(var i=0; i<series0Data.length; i++)
{
var sdi = series0Data[i];
//内置柱图系列数据对象格式为：{ value: [ 名称, 数值 ] }
var name = sdi.value[0];
var value = sdi.value[1];
if(value > normalValueTop)
sdi.itemStyle = { color: "red" };
else if(value < normalValueBottom)
sdi.itemStyle = { color: "blue" };
else
sdi.itemStyle = { color: "green" };
}
}
};
</script>
</head>
<body dg-chart-auto-resize="true">
...
<div style="width:100%;height:100%;" dg-chart-options="options" dg-chart-widget="..."></div>
...
</body>
</html>
切换回可视模式，最终效果如下所示：
源码地址：
Gitee：https://gitee.com/datagear/datagear
Github：https://github.com/datageartech/datagear
DataGear 制作自定义柱状图条目颜色的数据可视化看板的更多相关文章
- 如何用Python制作优美且功能强大的数据可视化图像
第一个案例 首先开始来绘制你的第一个图表 from pyecharts import Bar '''遇到不懂的问题?Python学习交流群:1004391443满足你的需求,资料都已经上传群文件,可以 ...
- 个人永久性免费-Excel催化剂功能第77波-专业图表制作辅助之批量维护序列点颜色及数据标签
2018年最后一天工作日完成第77波,7是代表完美,2个7,双重的完美,Excel催化剂的2018年从始至终共77波都充满着完美接近极致的功能体验.感谢各位一路相随,陪伴成长.最后一波,再次让数据分析 ...
- WPF 自定义柱状图 BarChart
WPF 自定义柱状图 当前的Telerik控件.DevExpress控件在图表控件方面做得不错,但是有时项目中需要特定的样式,不是只通过修改图表的模板和样式就能实现的. 或者说,通过修改当前的第三方控 ...
- android 开发 View _16 自定义计步器View、自定义柱状图View
/** *@content:实现计步的环形View *@time:2018-7-30 *@build: */ public class CountStepsAnnularView extends Vi ...
- 利用R语言制作出漂亮的交互数据可视化
利用R语言制作出漂亮的交互数据可视化 利用R语言也可以制作出漂亮的交互数据可视化,下面和大家分享一些常用的交互可视化的R包. rCharts包 说起R语言的交互包,第一个想到的应该就是rCharts包 ...
- 数据可视化之 图表篇（二）如何用Power BI制作疫情地图？
丁香园制作的这个地图可视化,相信大家每天都会看好几遍,这里不讨论具体数据,仅来探讨一下PowerBI地图技术. 这个地图很简洁,主要有三个特征: 1,使用着色地图,根据数据自动配色 2,只显示中国地图 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 制作自定义背景Button按钮、自定义形状Button的全攻略（转）
在Android开发应用中,默认的Button是由系统渲染和管理大小的.而我们看到的成功的移动应用,都是有着酷炫的外观和使用体验的.因此,我们在开发产品的时候,需要对默认按钮进行美化.在本篇里,笔者结 ...
- Expression Blend制作自定义按钮(转)
来源:http://www.cnblogs.com/iChina/archive/2011/11/25/2262854.html Expression Blend制作自定义按钮 1.从Blend工具箱 ...
- 【百度地图API】如何制作自定义样式的公交导航结果面板？
原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...
随机推荐
- [转帖]Redis之安全措施
指令安全 Redis的一些指令会对Redis服务的稳定性及安全性各方面造成影响,例如keys指令在数据量大的情况下会导致Redis卡顿,flushdb和flushall会导致Redis的数据被清空. ...
- 为什么Kubernetes和容器与机器学习密不可分？
原文出自infosecurity 作者:Rebecca James 京东云开发者社区编译 当前,数字化转型的热潮在IT领域发展的如火如荼,越来越多的企业投身其中,机器学习和人工智能等现代技术的融合在公 ...
- 一文搞懂Redis
作者: 京东物流 刘丽侠 姚再毅 康睿 刘斌 李振 一.Redis的特性 1.1 Redis为什么快? 基于内存操作,操作不需要跟磁盘交互,单次执行很快 命令执行是单线程,因为是基于内存操作,单次执行 ...
- Edge启动页面被篡改为hao123.com问题解决
零:问题 当打开edge的时候,默认启动了hao123.com 壹:思路 在edge中设置启动页面为baidu.com 查看是否是快捷方式被篡改, 确定是否是电脑管家锁定了主页为hao123.com ...
- TienChin 渠道管理-配置校验失败信息
新建 ValidationMessages.properties: channel.name.notnull=渠道名称不能为空 channel.type.notnull=渠道类型不能为空 channe ...
- 华为云虚拟IP申请
在上一篇文章当中我们搭建好了我们的 Nginx,这节呢,我们主要就是搭建我们的 Keepalive 与 Haproxy,搭建之前我们首先不要将我们华为云上面的弹性公网IP给取消了后续在取消,这次我介绍 ...
- 领域知识图谱-中式菜谱知识图谱：实现知识图谱可视化和知识库智能问答系统（KBQA)
领域知识图谱-中式菜谱知识图谱:实现知识图谱可视化和知识库智能问答系统(KBQA) A knowledge graph for Chinese cookbook(中式菜谱知识图谱),可以实现知识图谱可 ...
- 基于.NET+FreeSql实现的仿掘金专栏前后端分离的CMS
前言 今天分享一款基于.NET+FreeSql实现的仿掘金专栏前后端分离.支持Docker部署.集成了OAtuh2授权登录.QQ.Github.Gitee快速登录.简单实用的CMS:lin-cms-d ...
- SpringBoot分布式任务中间件开发 附视频讲解 (手把手教你开发和使用中间件)
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 分布式任务DcsSchedule中间件,Github地址:https://github.com ...
- Mygin中间件优化及日志中间件
本篇是mygin的第七篇,参照gin框架,感兴趣的可以从 Mygin第一篇 开始看,Mygin从零开始完全手写,在实现的同时,带你一窥gin框架的核心原理实现. 目的 中间件Middleware优化 ...