首页
/
每日頭條
/
時尚
/
可視化圖表的數據準備
可視化圖表的數據準備
更新时间:2025-03-19 00:54:45

這是Tiny 圖表庫四種核心圖表類型的展示,在文章開始之前讓我們先來一睹為快吧。

可視化圖表的數據準備(如何做出漂亮幹淨)1

在開發移動産品的過程中,我們總會遇到一些業務場景,需要用合适的方式來呈現數據。比如健身類app 用戶想要知道自己每天的健身時長來調整健身方式,理财類app 的用戶想要了解目前主要基金的走勢進行決策分析等等,在這些場景中,跟一團亂糟糟看得人之凡雲的數據相比,統計圖會更直觀、更友好,相比之下,做出聰明開發者的你會選擇那種方式呢?

想必英雄所見略同,大家都會選擇統計圖來可視化數據,為了讓事情更加簡單,我們可愛的Tiny 團隊挖掘了很多深層次需求之後,在Tiny 平台封裝了你需要的最好的圖表庫。所以,讓我們趕緊開始使用起來吧。

Tiny圖表庫四個核心圖表類型

  1. 柱狀圖 和 條形圖(TEBarChartEmbed)

  2. 折線圖(曲線圖)和面積圖(TELineChartEmbed)

  3. 環形圖(TECircleChartEmbed)

  4. 餅圖(TEPieChartEmbed)

  5. Tiny 圖表庫的圖表類型都具有繪制動畫。

統計圖博覽會

柱狀圖與條形圖的小事

讓我們來用Tiny 圖表功能做一個簡單的Bar chart吧 ^ ^

我們改變其中一個參數 direction 的值為 y 的時候,會發現我們的圖表加了一個特效,居然成了條形圖。

可視化圖表的數據準備(如何做出漂亮幹淨)2

善變的折線圖(曲線圖、面積圖)

讓我們來用Tiny 圖表功能做一個簡單的line chart吧 ^ ^

tml 頁面

<div>

<embed classid="TELineChart" class="mapview" id="TELineChartEmbed">

</embed>

</div>

/**

*

* @param id 指定圖表類型,TELineChartEmbed 表示的就是折線圖

*

* @param class 圖表呈現的大小、位置、布局等

*/

結果華麗華麗的~

可視化圖表的數據準備(如何做出漂亮幹淨)3

我們改變參數 isColorFill 的值為 true 的時候,會發現我們的圖表加了一個特效,居然成了面積圖。

可視化圖表的數據準備(如何做出漂亮幹淨)4

我覺得還可以改變,比如讓參數 cubicIntensity 取值為1,會怎樣呢?且看下圖,跟棱角分明的折線圖相比,雖然趨勢依舊,但多了幾分圓潤。

可視化圖表的數據準備(如何做出漂亮幹淨)5

環形圖

我們舉個栗子

tml 頁面

<div>

<embed classid="TECircle" class="circle" id="TECircleChartEmbed">

</embed>

</div>

/**

*

* @param id 指定圖表類型,TECircleChartEmbed 表示的就是環形圖

*

* @param class 圖表呈現的大小、位置、布局等

*/

結果依舊是華麗麗的~

可視化圖表的數據準備(如何做出漂亮幹淨)6

餅圖

我們舉複雜一點的栗子

tml 頁面

<div>

<embed classid="TEPieChart" class="circle" id="TEPieChartEmbed">

</embed>

</div>

/**

*

* @param id 指定圖表類型,TEPieChartEmbed 表示的就是餅圖

*

* @param class 圖表呈現的大小、位置、布局等

*/

當然,還是華麗麗的~

可視化圖表的數據準備(如何做出漂亮幹淨)7

額 這個餅圖有點不一樣,我們來改造改造,讓參數 centerTitle 和 centerSummary 的值為空,且删除參數 centerColor,這下看起來是不是熟悉很多了呢!

可視化圖表的數據準備(如何做出漂亮幹淨)8

如你在文章中所見,Tiny 平台的圖表漂亮,幹淨,優雅,具有快速響應的動畫效果,包括四個常見圖表類型(柱狀圖,折線圖,環形圖和餅圖)每個圖表都是獨立的模塊,每種模塊都有豐富的自定義選項和棒棒的動畫效果哦~,所以你甚至可以隻加載項目需要的模塊以最大化縮小代碼占用空間,同時能更容易提取和傳達關鍵的觀點和見解,還不趕緊來用用看。

更多詳細,請關注微信公衆号TinyBuilder 或者i_chaixiaomu。

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
最實用的9個純天然美白方法
最實用的9個純天然美白方法
俗話說得好“一白遮三醜”,不管是普通人還是明星,白到發光的人無論走到哪裡都能吸引到很多人的目光。我們中國人的膚色大部分發黃,但是也總會一小部分人憑着後天的努力,改變了自己的膚色,讓自己變成一道光,成為人人羨慕的對象。其實想要白不難,美容師都...
2025-03-19
會打扮的女人不一般
會打扮的女人不一般
大家都知道,細節決定成敗,其實這不止是在工作生活中如此,在女人的顔值氣質上也同樣如此。其實很多女孩子,在長相顔值上都是比較普通的,隻是有些女孩子在細節上做得到位,于是在整體顔值上得到了很大的提升。在我們的生活當中,應該都聽說過女大十八變這句...
2025-03-19
為什麼謝娜生了雙胞胎還要生二胎
為什麼謝娜生了雙胞胎還要生二胎
戳右邊關注我們,每天都有最新娛樂八卦等你批閱!9月13日,謝娜上班的一組路透照曝光。照片中,謝娜身穿灰白拼色寬松襯衣裙,頭戴漁夫帽,腳踩平底鞋,肚子明顯隆起,這身打扮實在是和懷了孕的孕婦并沒有什麼兩樣。從正面照更能清晰地看到,謝娜即便是穿着...
2025-03-19
宋威龍古裝黑衣造型
宋威龍古裝黑衣造型
《漂亮書生》怕不是個喜劇,鞠婧祎飾演的雪文曦女扮男裝寫瑪麗蘇言情小說,宋威龍飾演的風承俊和王瑞昌飾演的雷澤信,隻是為了自己能在小說裡的角色能讓自己滿意,一直要雪文曦一個解釋,還天天在文曦旁邊一口一個彬弟,一個師弟得争寵。在《漂亮書生》中雪文...
2025-03-19
五歲小女孩毛衣外套有哪些款式
五歲小女孩毛衣外套有哪些款式
,
2025-03-19
Copyright 2023-2025 - www.tftnews.com All Rights Reserved