我們直接步入正題：數據可視化在數據分析與展示有很強大的說服力，用這個展示給老板才能具有較好的說服力，這也是為什么數據現在這么重要的原因，一起都以數據說話。

你一大堆報告之類的都無法打動老板，你用一個可視化東西讓老板能非常直觀地看到效果與管理重要性，這個比費N多口舌都重要。

看似動態圖表好像很簡單，實際上輪播圖、3D地圖、動態時間齒輪圖都用上了...

就來說說最近很火的動態輪播條形圖吧，通過動態輪播條形圖可以清晰地看到每一項數據的變化趨勢、速度以及在不同時期的排名。

?

所以這段時間經常有朋友來問小編，帆軟的產品能做出這種效果嗎？當然是可以的，其實FineReport早就已上線了這個圖表模板，今天就來手把手教大家做一個動態輪播條形圖。

1、概述

1.1 問題描述

當數據源中包含分類、系列和時間維度時，希望按照時間從小到大依次輪播圖表數據，如下圖所示：

?

1.2 實現思路

在 SQL 查詢語句中設置時間參數過濾數據，時間參數的值會隨著時間而變化，然后定時刷新圖表。

2、示例

2.1 數據準備

新建決策報表，創建數據集 ds1，數據庫查詢語句如下：

SELECT

貨主城市,

strftime("%Y-%m",訂購日期) 年月,

sum(運貨費) 運貨費

FROM 訂單

where strftime('%Y-%m',訂購日期)='${left(monthdelta("1997-01-01",mod((datetonumber(now())-datetonumber(a))/1000,12)),7)}'

group by 貨主城市,strftime("%Y-%m",訂購日期)

order by 運貨費

?

2.2 報表設計

（1）菜單欄點擊模板>模板參數，新建一個默認值為=now的模板參數a。

?

（2）決策報表 body 組件的布局方式改為絕對布局，決策報表設計主體中拖入條形圖，如下圖綁定數據信息。

?

（3）條形圖樣式選擇標題，勾選標題可見，標題內容填寫公式UNIQUEARRAY(ds1.select("年月"))，并設置懸浮位置 x 方向50%，y 方向50%，字符為36號字體。

?

（4）條形圖樣式選擇圖例，不勾選圖例可見。

?

（5）條形圖樣式選擇標簽，勾選使用標簽，文本勾選值，位置設置為外側。

?

（6）添加定時刷新，條形圖特效選擇交互屬性，開啟后臺檢測，時間間隔為1秒。

?

2.3 效果預覽

（1）PC端效果如下圖所示：

?

?

（2）移動端效果如下圖所示：

?

?

這樣簡單幾步，就完成了一個動態輪播條形圖，是不是非常簡單，感興趣的朋友可以動手做起來了！

等一下，是不是還覺得不夠酷炫？還想要開頭動圖的背景？

制作那樣的大屏動效背景，采用插入動態 GIF 背景圖的方式可能無法完美自適應，所以直接用 JS 代碼來制作效果更好。

今天就給大家送上幾個動態背景。

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的数据分析想要酷一点？这个超火的动态图表，你一定要学会的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。