首先要了解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. 读书笔记 Week5 2018-4-5

    再结束了第一个个人任务以后,我也算有点时间翻开一本大部头来通读一下.在看了一些相关的评论说:“该书可以从任意章节读起”后,刚刚在180M测试文件的个人任务中吃了亏的我,决定从他的第5部分,代码改善看起 ...

  2. 如何判定Unity已破解成功

    [如何判定Unity已破解成功] 点击菜单“Unity”->"About Unity...".在弹出的关于Unity的信息的对话框中,如果是已破解版本,在右下角会显示序列号.

  3. mysql免安装版1067错误终极解决办法|在windows平台下MySql启动时的1067错误的解决方法及反思

    [windows事件查看] 我的电脑--此电脑--右键管理--计算机管理--系统工具--事件查看器--Windows日志--应用程序--找错误标志,如下图 [提示] 按部就班,可能并不能解决你的问题, ...

  4. codeforce 457DIV2 C题

    题意 你需要构造一个n个点m条边的无向有权图,要求这个图的MST中边权的和与从1到n的最短路长度都为素数 分析 可以想到这样一种贪心,在i到i+1直接连一条边,这样最短路和MST都会是同样的一些边.只 ...

  5. C# 把一个文件夹下所有文件复制到另一个文件夹下 把一个文件夹下所有文件删除（转）

    C# 把一个文件夹下所有文件复制到另一个文件夹下   public static void CopyDirectory(string srcPath, string destPath) { try { ...

  6. Ubuntu16.04 ARM平台移植libcurl curl-7.63.0

    libcurl是免费的轻量级的客户端网络库,支持DICT, FILE, FTP, FTPS, Gopher, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS,POP3, P ...

  7. 37.ROUND() 函数

    ROUND() 函数 ROUND 函数用于把数值字段舍入为指定的小数位数. SQL ROUND() 语法 SELECT ROUND(column_name,decimals) FROM table_n ...

  8. ESP8266文档阅读ESP8266 SDK 入门指南

    ESP8266 SDK  入门指南 1.概述 1.2.ESP8266 HDK 1.3.ESP8266 SDK 1.4.ESP8266 FW 1.5.ESP8266 工具集 2.1.开发板方案 3.软件 ...

  9. Java 并行和并发

    并行:指两个或多个事件在同一时刻点进行. 并发:指两个或多个事件在同一时间段进行.

  10. How Tomcat Works（十九）

    本文重点关注启动tomcat时会用到的两个类,分别为Catalina类和Bootstrap类,它们都位于org.apachae.catalina.startup包下:Catalina类用于启动或关闭S ...