發(fā)布時間:2024-08-26閱讀(17)
這是Tiny 圖表庫四種核心圖表類型的展示,在文章開始之前讓我們先來一睹為快吧。

在開發(fā)移動產(chǎn)品的過程中,我們總會遇到一些業(yè)務場景,需要用合適的方式來呈現(xiàn)數(shù)據(jù)。比如健身類app 用戶想要知道自己每天的健身時長來調整健身方式,理財類app 的用戶想要了解目前主要基金的走勢進行決策分析等等,在這些場景中,跟一團亂糟糟看得人之凡云的數(shù)據(jù)相比,統(tǒng)計圖會更直觀、更友好,相比之下,做出聰明開發(fā)者的你會選擇那種方式呢?
想必英雄所見略同,大家都會選擇統(tǒng)計圖來可視化數(shù)據(jù),為了讓事情更加簡單,我們可愛的Tiny 團隊挖掘了很多深層次需求之后,在Tiny 平臺封裝了你需要的最好的圖表庫。所以,讓我們趕緊開始使用起來吧。
Tiny圖表庫四個核心圖表類型
柱狀圖 和 條形圖(TEBarChartEmbed)
折線圖(曲線圖)和面積圖(TELineChartEmbed)
環(huán)形圖(TECircleChartEmbed)
餅圖(TEPieChartEmbed)
Tiny 圖表庫的圖表類型都具有繪制動畫。
統(tǒng)計圖博覽會
柱狀圖與條形圖的小事
讓我們來用Tiny 圖表功能做一個簡單的Bar chart吧 ^ ^
我們改變其中一個參數(shù) direction 的值為 y 的時候,會發(fā)現(xiàn)我們的圖表加了一個特效,居然成了條形圖。
善變的折線圖(曲線圖、面積圖)
讓我們來用Tiny 圖表功能做一個簡單的line chart吧 ^ ^
tml 頁面
<div>
<embed classid="TELineChart" id="TELineChartEmbed">
</embed>
</div>
/**
*
* @param id 指定圖表類型,TELineChartEmbed 表示的就是折線圖
*
* @param class 圖表呈現(xiàn)的大小、位置、布局等
*/
結果華麗華麗的~
我們改變參數(shù) isColorFill 的值為 true 的時候,會發(fā)現(xiàn)我們的圖表加了一個特效,居然成了面積圖。
我覺得還可以改變,比如讓參數(shù) cubicIntensity 取值為1,會怎樣呢?且看下圖,跟棱角分明的折線圖相比,雖然趨勢依舊,但多了幾分圓潤。
環(huán)形圖
我們舉個栗子
tml 頁面
<div>
<embed classid="TECircle" id="TECircleChartEmbed">
</embed>
</div>
/**
*
* @param id 指定圖表類型,TECircleChartEmbed 表示的就是環(huán)形圖
*
* @param class 圖表呈現(xiàn)的大小、位置、布局等
*/
結果依舊是華麗麗的~
餅圖
我們舉復雜一點的栗子
tml 頁面
<div>
<embed classid="TEPieChart" id="TEPieChartEmbed">
</embed>
</div>
/**
*
* @param id 指定圖表類型,TEPieChartEmbed 表示的就是餅圖
*
* @param class 圖表呈現(xiàn)的大小、位置、布局等
*/
當然,還是華麗麗的~
額 這個餅圖有點不一樣,我們來改造改造,讓參數(shù) centerTitle 和 centerSummary 的值為空,且刪除參數(shù) centerColor,這下看起來是不是熟悉很多了呢!
如你在文章中所見,Tiny 平臺的圖表漂亮,干凈,優(yōu)雅,具有快速響應的動畫效果,包括四個常見圖表類型(柱狀圖,折線圖,環(huán)形圖和餅圖)每個圖表都是獨立的模塊,每種模塊都有豐富的自定義選項和棒棒的動畫效果哦~,所以你甚至可以只加載項目需要的模塊以最大化縮小代碼占用空間,同時能更容易提取和傳達關鍵的觀點和見解,還不趕緊來用用看。
更多詳細,請關注微信公眾號TinyBuilder 或者i_chaixiaomu。
歡迎分享轉載→http://www.avcorse.com/read-387991.html
下一篇:紅娘是哪一部作品中的人物
Copyright ? 2024 有趣生活 All Rights Reserve吉ICP備19000289號-5 TXT地圖HTML地圖XML地圖