首先要了解Cboard的概念,

1.看板

2.图表

看Cborad的菜单知道了,首先先设计图表,可以展现未柱状图或者其它图片形式或者数据表格式。然后看板可以由多个图表组合而成。

需求如下:

看板包含两部分图表设计,左边横向柱状图是部门收入费用支出情况,右边饼图是费用支出汇总占比。要求右边费用支出汇总占比在没有点击左边的部门柱状图时,按所有部门的费用类型统计出汇总占比情况,如果点击左边的部门后,按照所选部门,右边的饼图过滤出所选部门的费用支出占比。

第一步:

在看板右上角点击【编辑】按钮,进入看板编辑

找到部门收入费用支出的图表设计位置,有个链接图标,点击。

弹出图表维度关联,说明这里用的是部门名称维度可以用来关联下游的图表

关联后面有两个图标,意思是本图表设计点击后要关联到另外一个图表还是关联到看板。

注意:这里如果出了可以关联到一个图表设计,同时还可以关联到多个图表设计,也就是再点击一次“

就可以生出新的关联。

同时最好把【费用支出汇总占比】的图表设计加上对应的部门名称过滤条件。

这样大功告成,现在预览测试一下。

在点击左边的部门柱状图之前如下图:

点击某一条部门柱状图后,右边柱状图发生了改变。

版权声明:本文为博主原创文章,需要转载请注明出处。

[置顶]Cboard 系列随笔

Cboard 实现看板里面图表仪表盘之间的联动的更多相关文章

  1. 2016/3/24 ①数据库与php连接 三种输出fetch_row()、fetch_all()、fetch_assoc() ②增删改时判断(布尔型) ③表与表之间的联动 ④下拉菜单 ⑤登陆 三个页面

    ①数据库与php连接   图表 header("content-type:text/html;charset=utf-8"); //第一种方式: //1,生成连接,连接到数据库上的 ...

  2. ios 两个 TableView 之间的联动, TableView 与 CollectionView 之间的联动

    两个 TableView 之间的联动, TableView 与 CollectionView 之间的联动 这是一个创建于 359 天前的主题,其中的信息可能已经有所发展或是发生改变. [联动] :两个 ...

  3. vue2中$emit $on $off实现组件之间的联动,绝对有你想了解的

    在vue2开发中,你肯定会遇到组件之间联动的问题,现在我们就来说说哪个神奇的指令可以满足我们的需求. 一.先上实例: 需求:点击A组件或者B组件可以使C组件的名称相应发生改变,同样,点击A组件也会使对 ...

  4. fiddler和bugfree之间的联动(做伪请求、伪响应、并发、抓密码)

    青.取之于蓝,而青于蓝:冰.水为之,而寒于水 不积跬步,无以至千里;不积小流,无以成江海. 1解压Fiddler Web Debugger V4.6.2017修正中文第6版至C盘Program Fil ...

  5. Echart 商业级数据图表

    简介 最近工作上用到这个图表库,图表丰富,用起来也很方便.纯javascript,可以流畅得运行在PC和移动设备上,兼容大部分浏览器. 支持折线图(区域图).柱状图(条状图).散点图(气泡图).K线图 ...

  6. 百度echart如何动态生成图表

    百度echart如何动态生成图表 一.总结 一句话总结: clear hideloading setOption 主要是下面三行代码: myChart.clear(); //清空画布myChart.h ...

  7. 图表制作工具之ECharts

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

  8. 帆软报表(finereport)图表操作细节

    图表间之间的组件间隔:body-->属性-->布局-->组件间隔 决策报表背景水印:body-->属性-->水印 仪表盘指针/枢纽/背景颜色:样式-->系列 柱形图 ...

  9. 数据图表插件Echarts(一)

    一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...

随机推荐

  1. 关于 pycharm 安装第三方模块的一些经验

    解决pycharm问题:module 'pip' has no attribute 'main' 更新pip之后,Pycharm安装package出现报错:module 'pip' has no at ...

  2. char(10)、varchar(10)、nchar(10)、nvarchar(10)的区别

    CHAR CHAR是定长的,当输入的字符小于10时,会在后面补空值,如果长度大于10,则会截取超出的字符 CHAR字段上的索引效率级高 VARCHAR 存储边长数据,但存储效率没有CHAR高 从空间上 ...

  3. 数字图像处理实验(15):PROJECT 06-02,Pseudo-Color Image Processing 标签: 图像处理MATLAB 2017-05-27 20:53

    实验要求: 上面的实验要求中Objective(实验目的)部分是错误的. 然而在我拿到的大纲中就是这么写的,所以请忽视那部分,其余部分是没有问题的. 本实验是使用伪彩色强调突出我们感兴趣的灰度范围,在 ...

  4. Luogu 4438 [HNOI/AHOI2018]道路

    $dp$. 这道题最关键的是这句话: 跳出思维局限大胆设状态,设$f_{x, i, j}$表示从$x$到根要经过$i$条公路,$j$条铁路的代价,那么对于一个叶子结点,有$f_{x, i, j} = ...

  5. Mr_matcher的细节2

    1.参数服务器 ROS参数服务器能保存数据类型包括:strings, integers, floats, booleans, lists, dictionaries, iso8601 dates, a ...

  6. JavaScript——Dom编程(1)

    DOM:Document Object Model(文本对象模型) D:文档 – html 文档 或 xml 文档O:对象 – document 对象的属性和方法M:模型 DOM 是针对xml(htm ...

  7. RegExp正则表达式对象

    JavaScript的RegExp对象有两种创建方式,一种是字面量,一种是对象. var r = /pattern/attributes或者new RegExp(pattern, attributes ...

  8. IOC AOP 设计模式

    IOC AOP 不是什么技术而是一种设计模式  学习 IOC AOP 其实是在学习一种思想. 1.IOC IOC其实是 将对象的创建和获取提取到外部.由外部IOC容器提供需要的组件. 看下面代码: p ...

  9. Sharepoint2013搜索学习笔记之自定义查询规则(十)

    自定义查询规则,可以根据搜索的关键字将指定的一个或一堆搜索结果提升到第一的位置,如我搜索周杰伦,可以指定搜索最靠前的结果是sharepoint网站内周杰伦的视频如下图: 第一步,进入管理中心,点击管理 ...

  10. 【SQL】- 基础知识梳理(一) - 数据库

    一.引言 知识分享这个事情在公司会议上被提出过几次,可一直因各种事情耽搁下来,“我不如地狱,谁入地狱”,怀着这样一种心态,写下了 数据库系列知识分享. 本文将一步步通过循序渐进的方式带你去了解数据库. ...