2016-08-06 分類: 網(wǎng)站建設(shè)
創(chuàng)建您的第一個JavaScript交互圖
數(shù)據(jù)就在我們周圍,它的可視化已經(jīng)成為我們生活中不可或缺的一部分。圖表,圖表,地圖,和儀表板有很大的需求的今天,因為他們目前的信息給我們的一種方式,可以很容易地解釋。
好的方面是,圖表不需要很大的 技能或?qū)iT知識的Web開發(fā)人員,設(shè)計師,或其他任何人。在這篇文章中,我們將向你解釋如何處理的基本知識和使用JavaScript和HTML5的交互式數(shù)據(jù)可視化,輕松。
我們要 開始創(chuàng)建一個單一的系列圖表你可以掌握的基本知識。然后我們會給你一個快速的方法來實現(xiàn)多系列和堆積條形圖。條形圖是顯示數(shù)據(jù)的這些天的一種流行方式,以及使用的發(fā)展邏輯可以很容易地轉(zhuǎn)換到其他類型的圖表。
今天有很多JavaScript圖表庫; 有如絕對自由D3和谷歌圖 而 別人需要用于商業(yè)用途的款項。在我看來,最全面和強大的人amcharts,AnyChart,和Highcharts。
在本教程中,我決定利用 AnyChart。然而,這個過程是非常相似的每一個圖書館,特別是如果你正在做一些簡單的東西。AnyChart具有廣泛的文檔和API參考以及各種各樣的支持的圖表類型和演示的代碼的操場,所以對初學者來說是一個不錯的選擇。
為了您的方便,所有的例子,圖中的教程都可以這集CodePen可以探索那里或出口的CSS / HTML / JavaScript的演示文件拉鏈。
JS 3個簡單的步驟圖
為您的網(wǎng)站或應用程序的一個基本的JavaScript圖表的制作過程包括以下三個步驟:
準備好你的數(shù)據(jù);
連接庫;
寫一個簡單的代碼。
1。數(shù)據(jù)準備
就像一艘大船要深的水域,一個簡單的圖形要簡單的數(shù)據(jù)。當然,如果你有大量的數(shù)據(jù)或結(jié)構(gòu)不明顯,你需要首先準備。
當建筑大部分流行的圖表類型,我們只需要X和Y的領(lǐng)域。然而,條形圖可以更簡單,因為它經(jīng)常發(fā)生的事,只有Y場使用,并 索引,或項目編號,為X,這樣當我們使用數(shù)據(jù)的JavaScript數(shù)組,例如:
一般來說,有很多的方式處理數(shù)據(jù),可視化軟件開發(fā)商通常描述在文檔或其中許多。記住,我推薦檢查的 相關(guān)部門 你的圖表庫的文檔。
2。讓 圖表庫
你使用圖書館顯然是一個 至關(guān)重要的因素在這里。 如果您要使用的圖表的地方,應該合理下載二進制包,并保持它的附近。
然而,如果你需要圖為Web應用程序或網(wǎng)頁的網(wǎng)站上,然后CDN 可能是更好的選擇。它將加載文件從最近的服務器給你的客戶,給你一個更快的頁面加載和更好的性能。
3.寫一個簡單的HTML / JavaScript代碼
當我們的數(shù)據(jù)和圖書館都準備好了,我們可以開始編寫代碼來繪制圖表 。
一)首先,我們需要 創(chuàng)建網(wǎng)頁上的一個圖表的容器。方法是使用一個元素并設(shè)置其<em><div</em>>ID:
分享題目:創(chuàng)建您的第一個JavaScript交互圖
鏈接地址:http://m.rwnh.cn/news19/20669.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、ChatGPT、云服務器、小程序開發(fā)、App設(shè)計、面包屑導航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容