Chart JS 視頻指南

搜索

搜尋

一直想學習 Chart JS，但需要更直觀的教學方式嗎？這個網站以更視覺化的方法來介紹 Chart JS。這樣可以確保更高程度的理解。

Chart JS 視頻指南

Chart JS 是一個奇妙的 JavaScript 庫，擁有許多選項，且體積依然相當小巧。這使得 Chart JS 成為一個真正的寶藏。它的功能非常多，但如果你不明白如何使用，可能無法發揮其潛力。這個網站盡可能涵蓋了關於 Chart JS 的所有可能性。準備好探索了嗎？

什麼是 Chart.js？

你常會聽到 Chart.js 是一個用來在 Javascript 中繪製圖表的 Javascript 庫或框架。然而，令人驚訝的是，一旦人們使用了 Chart.js，他們往往感受不到它與 Javascript 的聯繫。

許多人傾向於忘記 Chart.js 是基於 Javascript 的。我指的是，他們看不到如何將 Javascript 陣列與 Chart.js 結合起來，這是由於 Chart.js 使用的 canvas 標籤的複雜性。 

圖表是繪製在 canvas 標籤中的。Chart.js 使用的代碼基本上是指令，用來在 canvas 上的精確 x 和 y 座標位置繪製線條、點、圓形以及其他形狀。一旦你明白 Chart.js 就像是 canvas 的「Bootstrap」，可以快速繪製圖表，你就會對它有更好的理解。 

Chart.js 為你節省了時間，因為你不需要學習 canvas API。Chart.js 的代碼是一個預先編寫的模板，canvas API 可以讀取並立即繪製你所需的圖表。這個節省時間的工具幫助你快速上手。如果沒有它，你就需要學習如何編寫 canvas API 可以讀取（或在編程術語中稱為「解析」）的 Javascript 代碼。

那麼，回到問題：什麼是 Chart.js？這就是我對 Chart.js 的定義。

“Chart.js 是一個用 JavaScript 編寫的預設圖表模板，canvas API 可以讀取它。”

www.Chartjs3.com

這個定義為你提供了一個良好的起點。你可以立即明白它是 JavaScript 的，但也能看出它略有不同的原因。它是為了讓 canvas 標籤可讀而編寫的。雖然 canvas API 是用 JavaScript 編寫的，但其代碼略有不同。 

許多人掙扎的原因在於他們無法看到這種關係，從而無法更深入地理解 Chart.js。不了解如何使用 canvas API 或如何用 JavaScript 編寫它並不是壞事，但這會限制你的選擇並降低圖表的互動性。這種限制是許多人經常遇到的障礙。 

為什麼你想使用 Chart.js 以及障礙所在

許多人希望使用 Chart.js 是因為他們想要漂亮且互動的圖表，其中數據來自數據庫或 JSON 對象，一旦點擊按鈕，就會變成新的、更新的內容。它應該不僅僅是我們在 Ms. Excel 中常見的標準平面圖表。可惜的是，一旦他們意識到使用 Chart.js 需要對多個領域（如 JavaScript、Chart.js、canvas API、MySQL、PHP、Node JS 等）有扎實的理解，這就成為了一個真正的障礙，使得圖表變得互動起來變得困難。

如何突破 Chart.js 中的障礙？ 

這本書的目標是解決你在 Chart.js 中遇到的障礙。我有很多視頻，並且在注意到最受歡迎的視頻主題是關於 Chart.js 與互動性相關的內容後，我決定編寫一本關於這個主題的書。 

這本書旨在幫助你達到目標。這是一本視覺化的視頻書籍。也就是說，你將學到知識，所有主題也以視頻格式呈現，以便更好地解釋和理解。許多程序員是視覺導向的，這也是為什麼他們從事網站和編程工作。看到它如何運作並理解其背後的原理對於學習 Chart.js 是關鍵。 

為什麼 Chart.js 文檔不涵蓋互動性主題？

你可能已經閱讀過 Chart.js 文檔，並發現它們對互動性沒有深入探討。Chart.js 文檔的目標是幫助你學習如何使用 Chart.js。換句話說，互動性超出了它們的範疇。它們專注於解釋如何繪製圖表，而不涉及如何創建互動性，這被視為涉及 JavaScript、canvas API 代碼、MySQL 或其他與 Chart.js 無關的內容。他們正確地期望你訪問他們的網站是因為你想學習如何在 Chart.js 中繪製圖表。 

Chart.js 被稱為一個 JS 框架。框架由兩個詞組成，即 frame 和 work。這意味著你在一個固定的範圍或框架內工作。把它看作是一個畫框，就像是一個「邊界」（類似於 CSS）。所有在這個邊界之外的內容都超出了範圍，Chart.js 不會涵蓋這些內容。 

為什麼？如果你想學習如何將 Chart.js 與 MySQL 結合使用，他們期望你學習 MySQL 文檔，因為他們不是來教你這些內容的。雖然它們結合使用非常有用，但 Chart.js 文檔避免涵蓋這些內容，以保持文檔的簡潔。否則，文檔將變得龐大且難以管理。想想他們需要涵蓋的所有主題，包括許多其他框架和編程語言。

互動式 Chart.js 文檔

你已經對為什麼目前的 Chart.js 文檔是這樣編寫有了深刻的理解。現在是時候添加一層複雜性，即涵蓋 Chart.js 的互動部分。 

要創建一個互動式圖表，你需要了解多種語言和 JavaScript 中的多個主題。 

1. HTML input fields: Input fields is the starting point of interactivity on a chart.  
2. JavaScript arrays: Without the understanding this you would be able to manipulate data in any way or format. 
3. JavaScript functions: Functions are needed to create a response once a button has been clicked or a hover effect has been triggered. 
4. Chart.js API: Chart.js covers some advanced topics which helps you with canvas tag related items. 
5. Database (MySQL, MongoDB etc): For database connection there are many options possible. Many people are moving towards a fullstack JS programming language. Meaning frontend and backend is JS. 
6. Server Side Scripting Languages (PHP, Nodejs etc): These are essential middleman “communicating” frontend with backend (database or servers).

讓我們在接下來的章節中涵蓋這些主題。 

第 1 章：在 Chart.js 中創建固定圖表

在 Chart.js 中創建圖表非常簡單。Chart.js 文檔提供了一個很好的示範代碼。然而，他們往往會忽略一些額外的解釋。關鍵部分是那些代碼塊，它們是最終很好地連接在一起的代碼片段。他們有一個來自 Chart.js 2 的舊示例，我不建議使用那段代碼。學習新的方法。 

這些代碼塊通常分為 3 個獨立的部分，但如果圖表有一些自定義調整，可能會有更多部分。這些代碼塊可以被視為 Chart.js 代碼的骨架或基礎。在視頻中，我經常將它們稱為：

1. 設置或數據區塊
2. 配置或設定區塊
3. 渲染或初始化區塊

設置區塊

設置或數據區塊包含了我們在圖表中使用的所有默認數據。包括標籤、數據集、數據點等。

配置區塊

配置區塊包括數據區塊的引用、選項和圖表類型。

渲染區塊

渲染或初始化（init）區塊啟動或激活在它所指向的 canvas 標籤中繪製圖表的過程。

Chart.js 骨架區塊代碼視頻

這個視頻介紹了如何從 Chart.js 文檔中抓取舊的示範代碼，並將其轉換為最新版本，因為 Chart.js 開始朝著這種結構發展。

如果你有興趣獲取精確的源代碼，你可以在這個特定頁面上找到完整的頁面以及更多解釋。

其中包含相同的視頻，但還有關於 Chart.js 區塊和源代碼的額外信息。

第 2 章：探索渲染、配置和數據區塊

雖然渲染區塊涵蓋了圖表的繪製，因此它被稱為渲染或初始化區塊。初始化指的是開始的過程，所以它從一開始就開始繪製圖表。這變得更加重要，當你使用 chart.destroy API這一點尤其重要，如果你希望在點擊按鈕時切換不同的圖表類型。

在配置區塊中的不同圖表類型

Chart.js 3 內建了許多不同的圖表類型，如下所示：

• 條形圖
• 折線圖
• 餅圖
• 環形圖
• 散點圖
• 氣泡圖
• 雷達圖
• 極區圖

除了默認的圖表類型，還有更多選項，如組合圖表，但這些只是 Chart.js 中內建的基本功能。如果你像大多數人一樣，總是希望嘗試更高級的圖表，那些是更自定義的。例如， histogram chart 還有更多更高級的圖表，我們稍後會詳細介紹。

然而，改變基本的圖表類型是相當簡單的。在 Chart.js 中，你只需進入配置區塊，並插入你想要的圖表類型即可。

    // config block
    const config = {
      type: 'bar',
      data,
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };

在這裡，你可以看到應該調整的加粗顏色項目。然而，如果你想要創建一層互動性，你需要做什麼呢？

雖然圖表類型是一個有趣的項目，但它相對直接。大多數圖表類型有很多相似之處，但也有一些不同，可能會有或沒有坐標軸，例如餅圖和環形圖，或者它們擁有不同的結構，例如雷達圖。我們會在稍後更深入地探討這些，但首先讓我們轉到如何修改數據。

Data block and datasets

最重要的部分是數據集，這也是大多數注意力集中的地方。數據集是用來繪製數據點的區塊。圖表的目標是將數字的故事轉換成一幅圖像，這使得數字更容易被大腦消化。

雖然硬編碼數字相對簡單，但將它們轉換為軟編碼則是一個挑戰。主要原因在於數組操作。能夠操作數組數據幫助你只顯示需要查看的值。

許多使用 Chart.js 的人往往無法真正掌握這一部分。主要原因是他們對 Chart.js 的理解有所不同。當他們發現 Chart.js 很大程度上是基於數組時，他們意識到 Chart.js 確實是 JavaScript，但附帶了大量的 canvas API 代碼。

如何修改數組？

修改數組通常使用四種最常見的方法，但 JavaScript 提供了完整的數組方法列表供你使用。如果你想真正理解這一點，確保探索一下以下內容： Chart.js 數組系列它涵蓋了許多不同的項目。

不過，目前給你四種常見的方法是個不錯的入門介紹。如果你想了解更多，請務必探索涵蓋 19 個不同視頻的數組操作系列。

• Push Array Method, adds value to the end of array.
• Pop Array Method, removes last array value.
• Unshift Array Method, adds value to the beginning of array
• Shift Array Method, removes first array value

使用這四種基本數組方法，你可以做很多事情。那麼，如何使用它們呢？讓我們這裡拿一個例子來看看。

const colors = ['red', 'blue', 'green'];

colors.push('yellow')   // colors = ['red', 'blue', 'green', 'yellow'];
colors.pop()            // colors = ['red', 'blue', 'green'];
colors.unshift('black') // colors = ['black', 'red', 'blue', 'green'];
colors.shift()          // colors = ['red', 'blue', 'green'];

如你所見，每個數組方法的作用及其使用方式就是通過附加數組項目（在這個例子中是 colors），並在其後添加數組方法。如果使用 push 或 unshift 之類的方法添加值，你需要定義將添加到數組中的值。

這是處理數組的最簡單方法。還有另一種更高級且強大的方法，稱為 Chart.js 中的數據結構。

數據結構是處理數據集的高級方法

數據結構是最強大且高級的處理方式之一。Chart.js 給這個項目分配了一個很小的區域，這有點可惜，因為數據結構可以真正簡化數組操作。實質上，數據結構是 JavaScript 對象，可以直接在圖表中讀取。

Chart.js 這樣做是因為我們經常從 JSON 或對象中獲取數據，將對象轉換為多個數組並不合適。因此，教 Chart.js 讀取現有結構會更好。這一點在 Chart.js 3.1 版本中得到了很好的引入。

要理解這一點，有多個視頻專門涵蓋這個主題，位於一個單獨的頁面上。請確保觀看所有這些視頻。 數據結構 video.

However, to make sure you understand the essence this video will give you a basic understanding.

The more advanced topics related to data structures you can find on the 數據結構 page. Highly recommend!

To use data structures we need to reassign the x and y values as we need to indicate to Chart.js where to get the data point instead of before. For this as you notice in the video we use parsing and xAxisKey and the yAxisKey.

To parse means make something readable for the language we are parsing it into. In this case we parse the new data object to make it readable for Chart.js to draw the chart.

The data structures is one of the best things in Chart.js but it is not really clear as it is more something you will only notice once you need to work with data and charts often. Now we have our understanding of the most important part of the data we should focus on functionality.

Chart.js functionality and interactions

Using colors in Chart.js can be very useful for highlighten something. Color coded datapoints can communicate something without words. For example when we color a negative value red and a positive value green we have communicated without saying a word. However intuitive the user most likely will understand it.

The background color and the border color settings are within the data block within the dataset. The video here controls basic color coded options. With green and red depending on the value.

These options are luckily not yet complicated as it works with arrays. Once you understand how to push values into an array. You can start to play with colors in a more intuitive way. As you notice every time a new skill as been mastered you can now expand your options in Chart.js.

---

Everything below are specific concepts that will need to be reorganized into chapters.

---

Understanding difference between Time and Time Series in Chart JS

In Chart.js we often have to draw charts with specific dates. If you are creating a stock market chart where your chart has data for the weekdays only you will have missing or static data the weekends and public holidays. This might be undesirable and you might want to remove those specific dates to keep the chart clean.

Time Chart JS

The type of time is this case not useful. As this will calculate the space based on the difference of the timeframe. For example if the next datapoint would be a week away from the current datapoint it will calculate 7 segments of space. This creates a big gap in our chart. See the gap in the x scales below.

Time Series Chart JS

Chart.js has a nice build in feature to answer this specific matter which is the timeseries. In it will set every date based on equidistant. Equidistant is derived from the words ‘equal’ and ‘distant’. In otherwords, it will set every next datapoint on equal distant no matter the the timeframe between the years. See the image below:

Of course, by doing this we will need to modify how to scale presents the dates as it might overlap if there is a huge amount data squeezed between a segment.

---

How to Create a Table From Datasets in Chart JS

Creating a table based on the data from Chart.js requires a fine understanding of JavaScript. Specifically, how to create table elements and building a table object in JS.

With Chart.js we are able to extract the data object which is neatly organized for drawing the chart. That same piece of data is useful for creating the table. The video below will show you exactly how.

---

How to Create a Sales Funnel Chart in Chart JS

Creating a sales funnel chart in Chart JS is possible. However, it requires some advance plugin customization to get it working. What we need to understand is how to draw custom shapes which converts the bars into a funnel.

If you are ready for some advance level Chart.js. In that case this video will be a great challenge. It will track the sales funnel and every step of the funnel, the funnel shrinks based on the values of dataset.

---

How to Save Chart as Image in Chart JS

To save and download a chart or canvas as an image we will need to do some work. By default on right click you can download and save chart as an image. However, this is not quite obvious for many so creating a special download button is a great alternative.

How to Download Canvas as Image on Button Click in Chart JS.

The video below will show you exactly how to achieve this. We will convert the canvas into a PNG file that we can download and save on our device.

Skillshare Course Coming Soon!

I have been working on a few Skillshare courses. If you do not have Skillshare and want to explore their options. You can get a week free of Skillshare by clicking this link below. This is an affiliate link that will give me a commission if you sign up, it will cost you nothing during this free period. And the commission I receive will be reinvested in Chart.js tutorials and R&D:

Get a Free Week of Skillshare