問題描述

請看上圖，需求背景如下：現(xiàn)在有多(5)個主題，也就是多個大豎條，我只畫了2個。每個主題中又有維度，每個維度的數(shù)據(jù)是不同的。圖片中的顏色大小就是模擬數(shù)據(jù)的大小來顯示的。如果某個維度的數(shù)據(jù)大，那么該格子的高度就高點(diǎn)。也就是說：數(shù)據(jù)abcde顯示的方塊高度是根據(jù)數(shù)據(jù)來的。但是，現(xiàn)在各個主題之間的數(shù)據(jù)是有流入流出的效果。也就是說可能第一主題的數(shù)據(jù)a指向了第二主題的數(shù)據(jù)c和數(shù)據(jù)d現(xiàn)在的問題的是，頁面上所有塊的展示和箭頭的指向都是由數(shù)據(jù)來決定的。

我的問題如下：

像這種頁面該怎么布局，或者有沒有其他的解決方案？

頁面上怎么畫箭頭，箭頭該怎么動態(tài)的指向？

有沒有其他第三方類庫能解決類似的需求？

請知道的朋友能給一些解決方案，謝謝！

問題解答

單純的色塊用 css 布局絕對沒問題，不管是 5 個還是 N 個，高度顏色用 js 動態(tài)設(shè)置即可。

畫箭頭？css 也不是畫不出來，不過是需要把時間耗費(fèi)在線條位置、長度、角度的計(jì)算上了，結(jié)合 transform。

結(jié)合前兩條，還是尋求圖表庫解決吧。如果沒有箭頭的話，有些漏斗圖應(yīng)該可以改成豎條色塊的形式。加上箭頭就難尋了。。。

我推薦直接 canvas 自己造吧，畫矩形一個方法就出來了。找到要畫連接線的兩個色塊的中點(diǎn)，也很容易畫一條斜線。

手動繪制應(yīng)該可以實(shí)現(xiàn)，但是如果用在實(shí)際項(xiàng)目中，建議使用JS的繪圖庫中的堆棧圖實(shí)現(xiàn)，例如百度的ECharts或阿里的G2。