JimuReport積木報表—圖表聯動圖表專題

聯動是指在一個報表中點擊表格某行或者圖表某區域，根據點擊數據重新渲染聯動的圖表，積木報表聯動分爲表格聯動圖表和圖表聯動圖表！下面就介紹一下圖表如何聯動圖表吧。

# 聯動效果

示例：點擊某公司員工柱狀圖報表，可聯動展示該員工的每月訂單金額、每月回款率及客戶資源佔比 圖表

# 聯動配置步驟

1. 設計圖表

1.1 添加圖表

• 點擊工具欄“圖表”，添加“柱形圖”、“折線圖”、“餅圖”圖表

1.2 添加數據集

本示例使用api數據集，api返回數據格式均爲json格式：

[
	{"name":"張三","value":320},
	{"name":"李四","value":332},
]

1.2.1 添加“員工”數據集

• 查詢銷售量前10名員工

• 數據集編碼和名稱爲“xs”，返回值爲“name”，“value”

1.2.2 添加“每月訂單金額”數據集

• 填寫Api數據集編碼及名稱，根據點擊員工姓名，查詢該員工每月訂單金額

• 數據集編碼和名稱爲“yu”，返回值爲“name”，“value”

1.2.3 添加“每月回款率”數據集

• 根據點擊員工姓名，查詢該員工每月回款率；

• 數據集編碼和名稱爲“hk”，返回值爲“name”，“value”

1.2.4 添加“客戶資源佔比“數據集

• 根據點擊員工姓名，查詢該員工的客戶資源佔比情況

• 數據集編碼和名稱爲“zhanbi”，返回值爲“name”，“value”

1.3 配置圖表數據

1.3.1 “員工”柱狀圖

• 選中圖表可在“樣式”中，修改柱狀圖柱體顏色

• 選中圖表可在“數據”中，配置柱狀圖數據

• 選擇Api數據集，動態數據，綁定數據集“xs”，將數據集配置給員工柱狀圖

• 系統會自動將數據集“name”字段映射至X軸，將數據集“value”字段映射至Y軸

1.3.2 “每月訂單金額”折線圖

• 選擇Api數據集，動態數據，綁定數據集“yu”，將數據集配置給“每月訂單金額”折線圖

• 系統會自動將數據集“name”字段映射至X軸，將數據集“value”字段映射至Y軸

1.3.3 “每月回款率”折線圖

• 選擇Api數據集，動態數據，綁定數據集“hk”，將數據集配置給 “每月回款率”折線圖

• 系統會自動將數據集“name”字段映射至X軸，將數據集“value”字段映射至Y軸

1.3.4 “客戶資源佔比“餅圖

• 選擇Api數據集，動態數據，綁定數據集“zhibi”，將數據集配置給 “客戶資源佔比“餅圖
• 數據集字段“name”，“value”自動匹配餅圖

2. 重點—超鏈接配置

2.1 添加超鏈接

選中“員工”柱狀圖，點擊“超鏈接設置”，選擇“圖表聯動”

2.2 配置聯動信息

• 鏈接名稱：聯動配置的名稱（隨意填寫）

• 鏈接圖表：選擇報表中所需要鏈接的圖表，如：“每月訂單金額”、“每月回款率”、 “客戶資源佔比“

參數設置說明：點擊“員工” 時通過“type”來聯動“每月訂單金額”、“每月回款率”、 “客戶資源佔比“，所以聯動參數如下

• “原始參數—圖表分類屬性”爲“員工” 中的“name”
• “映射參數—type”爲傳至“班級學生分數圖表” 中的參數“type”
• “每月訂單金額”聯動配置

• “每月回款率”聯動配置

• “客戶資源佔比“聯動配置

設計完成保存後，點擊預覽，即可查看聯動效果。

附錄：

• 積木報表的聯動還支持複雜規則，比如 支持條件，更多配置 請參考文檔。
• 體驗官網：www.jimureport.com