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来制作一个比较美 ...
随机推荐
- [转帖]一本正经的八卦一下CPU的自主可控 之二
https://zhuanlan.zhihu.com/p/62399200 一本正经的八卦一下CPU的自主可控 之二 上回书说到CPU自主可控第一个层面的指令集问题.这回聊一聊接下来的设计问题. 第二 ...
- Springboot 内嵌Tomcat 的http连接池与thread的关系
前言 最近看了很多tcp/ip 连接以及 IO相关的文章,但是依旧对数据库连接池等的部分不是很清楚, 所以这里仅是简单描述一下tomcat对应的http连接池数量的情况,不考虑与数据库的连接池的情况. ...
- OpenPower服务使用node-exporter prometheus以及grafana进行性能监控的流程
OpenPower服务器性能监控操作流程 1. 前言 最近看了很多prometheus以及influxdb进行性能监控的帖子,简单学习了下influxdb是一个单纯的时序数据库,prometheus是 ...
- 开启中文智能之旅：探秘超乎想象的 Llama2-Chinese 大模型世界
"开启中文智能之旅:探秘超乎想象的 Llama2-Chinese 大模型世界" 1.国内Llama2最新下载地址 本仓库中的代码示例主要是基于Hugging Face版本参数进行调 ...
- 1.13 导出表劫持ShellCode加载
在Windows操作系统中,动态链接库DLL是一种可重用的代码库,它允许多个程序共享同一份代码,从而节省系统资源.在程序运行时,如果需要使用某个库中的函数或变量,就会通过链接库来实现.而在Window ...
- 9、数据库学习规划：Oracle - 学习规划系列文章
甲骨文公司的Oracle数据库是笔者认为的目前市面上性能最强大的数据库.其版本也发展到了现在的12c,提供的功能也更加的强大了.以前笔者使用的是9i,十几年过去了,也才发展到12代,说明Oracle数 ...
- 使用Visual studio code 进行.NET 开发
Visual studio code 作为一款强大的编辑器,相信很多开发者都用过.vs code 的强大源自开源生态丰富,编辑器本身简单,但是加上各式的插件,就变得无比牛逼,基本可以替代现有的大部分工 ...
- RPA AI .NET Core 与未来--学习笔记
摘要 当下 RPA 平台主要采用 .NET Framework 框架,也限制了 RPA 只用于 Windows 平台..NET Core 的开放与跨平台特性赋予 RPA 更大发展空间. RPA是什么 ...
- ABC 305
题目列表 前三题过水,第四题分类讨论两个端点之间的距离和所在位置是清醒或睡眠 即可. E 题意:一张图上有一些结点有保安,每个保安有不同的警戒度 \(h_i\),定义 一个结点是安全的 为这个结点可以 ...
- JS leetcode 回文数 题解分析，数学不好是硬伤
壹 ❀ 引 每日一题环节,今天的一道是让我相信自己数学薄弱的题目,题目来源leetcode9. 回文数,题目描述如下: 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样 ...