哈希技術部落格


Slider

JavaScript教學 – 產生圖表

在網頁中,經常會需要將數據做呈現,除了傳統的表格呈現方式以外,透過折線圖、直方圖、圓餅圖….等方式,將資料「視覺化」,是非常重要的環節。

今天,我們會分享,如何透過JavaScript,在你的網頁上呈現視覺化的圖表哦!

使用Chart.js

JavaScript可以透過CDN引入其他的函式庫,讓我們更方便的使用特定的功能。
其中圖表的部分有很多函式庫可以達成效果,這邊我們選擇以「Chart.js」進行示範。
Char.js官方網站

透過CDN,加入Chart.js函式庫

首先開啟CDN的函式庫統整網頁,就可以在其中找到Chart.js的相關資訊

接著,透過以下程式碼,將Chart.js引入你的網頁中

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" 
integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" 
crossorigin="anonymous"></script>

產生圖表

接著,可以透過官網提供的圖表範例,產生第一個圖表。
範例連結:https://www.chartjs.org/docs/latest/getting-started/usage.html

data其中的語法說明:
type代表產生的圖表類型,包含以下種類:

labels則是產生的資料種類(x軸),以清單型別表示

接著就可以產生你想要的資料圖表囉!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *