這款設計主要是用於進行數據分析和對比,譬如,不同省份的一些不同月份的數據對比(圖爲China Telecom的一些假數據)。 設計取名爲LatticeControl。
頁面開始,每一個藍色格子代表一個月份:
右側的數據顯示的是對應省份的營業額以及該省份在總體上的比例。
當鼠標經過某一項時,顯示當前月份的信息:
點擊某一個格子,當前節的對應項進行高亮顯示,同時右側顯示所有項May(五月)的相關信息:
繼續點擊當前的選中項,所有省份的May項會移動到第一位進行形象比較,右側數據仍顯示當前比較的項:
當用戶繼續點擊移動項時,選中的移動項會返回到原本位置,如開始所示:
在此期間,若用戶選中其他項,則已經移動的項會返回,同時選中的項會移動到首位進行比較。
上述版本是以每個省份的數據都是100%爲限定的,也就是說每個省份的所有月份數據(藍色格子的長度)加起來都是相同的, 這是代碼給定了‘percentage’ 參數,這樣有有點也有缺點,有點就是整體更加充實,但缺點卻不會更加形象,如果給定‘value’ 參數,則會按照固定的數值進行顯示,這樣會更加形象地看清整體的對比, 如下:
由此就可以更加形象地做出對比和分析:
時間原因,代碼部分會在後面的文章中貼出。