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>

切换回可视模式，最终效果如下所示：

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

源码地址：

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

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

DataGear 制作自定义柱状图条目颜色的数据可视化看板的更多相关文章

  1. 如何用Python制作优美且功能强大的数据可视化图像

    第一个案例 首先开始来绘制你的第一个图表 from pyecharts import Bar '''遇到不懂的问题?Python学习交流群:1004391443满足你的需求,资料都已经上传群文件,可以 ...

  2. 个人永久性免费-Excel催化剂功能第77波-专业图表制作辅助之批量维护序列点颜色及数据标签

    2018年最后一天工作日完成第77波,7是代表完美,2个7,双重的完美,Excel催化剂的2018年从始至终共77波都充满着完美接近极致的功能体验.感谢各位一路相随,陪伴成长.最后一波,再次让数据分析 ...

  3. WPF 自定义柱状图 BarChart

    WPF 自定义柱状图 当前的Telerik控件.DevExpress控件在图表控件方面做得不错,但是有时项目中需要特定的样式,不是只通过修改图表的模板和样式就能实现的. 或者说,通过修改当前的第三方控 ...

  4. android 开发 View _16 自定义计步器View、自定义柱状图View

    /** *@content:实现计步的环形View *@time:2018-7-30 *@build: */ public class CountStepsAnnularView extends Vi ...

  5. 利用R语言制作出漂亮的交互数据可视化

    利用R语言制作出漂亮的交互数据可视化 利用R语言也可以制作出漂亮的交互数据可视化,下面和大家分享一些常用的交互可视化的R包. rCharts包 说起R语言的交互包,第一个想到的应该就是rCharts包 ...

  6. 数据可视化之 图表篇（二）如何用Power BI制作疫情地图？

    丁香园制作的这个地图可视化,相信大家每天都会看好几遍,这里不讨论具体数据,仅来探讨一下PowerBI地图技术. 这个地图很简洁,主要有三个特征: 1,使用着色地图,根据数据自动配色 2,只显示中国地图 ...

  7. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  8. 制作自定义背景Button按钮、自定义形状Button的全攻略（转）

    在Android开发应用中,默认的Button是由系统渲染和管理大小的.而我们看到的成功的移动应用,都是有着酷炫的外观和使用体验的.因此,我们在开发产品的时候,需要对默认按钮进行美化.在本篇里,笔者结 ...

  9. Expression Blend制作自定义按钮(转)

    来源:http://www.cnblogs.com/iChina/archive/2011/11/25/2262854.html Expression Blend制作自定义按钮 1.从Blend工具箱 ...

  10. 【百度地图API】如何制作自定义样式的公交导航结果面板？

    原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...

随机推荐

  1. ESXi6.7安装Win11的方法

    背景 公司里面要进行新的操作系统验证了. 之前Win10 Win7 Win8 都比较简单. 就是现在Win11有了TPM非常繁琐. 今天必须得搞一把了,就简单搜索了下. 发现还是可以解决的. 然后记录 ...

  2. [知乎]聊一聊threadlocal

    作者:李二狗链接:https://www.zhihu.com/question/341005993/answer/1996544027来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  3. error: Your local changes to the following files would be overwritten by merge

    拉取代码出现 error: Your local changes to the following files would be overwritten by merge 解决方案 你团队其他成员修改 ...

  4. 跟着文档学Fabric：获取通道配置

    原文在这里. 1. 获取通道配置 peer channel fetch config config_block.pb -o $ORDERER_CONTAINER -c $CH_NAME --tls - ...

  5. 提高Unity编译dll的速度

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

  6. Unity的SpriteAtlas实践

    我的环境 Unity引擎版本:Unity2019.3.7f1 AssetBundles-Browser 于2021-1-14拉取,github上最后提交日期是2019-12-14,在本文简称:ABBr ...

  7. 使用protobuf生成代码import包找不到

    protobuf使用import导入包找不到 前言 解决方案 protobuf使用import导入包找不到 前言 使用protobuf生成go代码,发现protobuf中一个import引用找不到 p ...

  8. 样本数量不平衡问题方案（Focal Loss & Circle Loss）

    1.Focal Loss focal loss是最初由何恺明提出的,最初用于图像领域解决数据不平衡造成的模型性能问题.本文试图从交叉熵损失函数出发,分析数据不平衡问题,focal loss与交叉熵损失 ...

  9. 【四】AI Studio 项目详解【VisualDL工具、环境使用说明、脚本任务、(四)图形化任务、在线部署及预测】PARL

    相关文章 [一]-环境配置+python入门教学 [二]-Parl基础命令 [三]-Notebook.&pdb.ipdb 调试 [四]-强化学习入门简介 [五]-Sarsa&Qlear ...

  10. 19.12 Boost Asio 获取远程进程

    远程进程遍历功能实现原理与远程目录传输完全一致,唯一的区别在于远程进程枚举中使用EnumProcess函数枚举当前系统下所有活动进程,枚举结束后函数返回一个PROCESSENTRY32类型的容器,其中 ...