[Open Source] **AntV Infographic 上手即刻，資訊圖表時代降臨！**

用 AntV Infographic 讓你的數據說故事：給台灣初學者的超完整指南

嘿，各位台灣的讀者們！你有沒有覺得，看著一堆數字和文字，腦袋就開始打結？在資訊爆炸的時代，如何讓數據更容易被理解、更吸引人，絕對是個重要的技能。今天，我們要介紹一個超棒的工具—— AntV Infographic，它能讓你輕鬆製作出令人驚艷的資訊圖表（infographic），把複雜的數據變成一目瞭然的視覺饗宴！

什麼是 AntV Infographic？

簡單來說，AntV Infographic 是一個由阿里巴巴 AntV 團隊開發的聲明式資訊圖表生成引擎。什麼是「聲明式」？意思就是，你只要用簡單的語法描述你想要呈現的資訊，Infographic 就會幫你把圖表畫出來！你不需要從頭開始畫線條、設置顏色，它就像一個聰明的助手，讓你可以專注在數據本身，而不是繁瑣的繪圖細節。

為什麼要選擇 AntV Infographic？

上手超容易： 它的語法設計非常直觀，就算你沒有程式設計背景，也能很快上手。
豐富的模板： 內建了大量的資訊圖表模板，從簡單的流程圖到複雜的數據儀表板，應有盡有。你可以直接套用，也可以根據自己的需求進行調整。
高度客製化： 除了模板，你還可以自定義圖表的樣式、顏色、字體，讓你的資訊圖表獨一無二。
支援 AI 生成： Infographic 特別為 AI 友善設計，可以搭配 AI 產生資訊圖表，讓你更有效率地呈現數據。
高品質 SVG 輸出： 預設使用 SVG 格式，確保視覺品質，也方便後續編輯。

初學者入門指南：從零開始打造你的第一個資訊圖表

讓我們一步一步，開始你的 Infographic 旅程吧！

1. 環境準備：

首先，你需要安裝 Node.js 和 npm（Node Package Manager），這兩個是 JavaScript 開發的基礎環境。你可以在 Node.js 官方網站下載並安裝。安裝完成後，打開你的終端機或命令提示字元，輸入 node -v 和 npm -v，確認是否成功安裝。

2. 建立你的專案：

接著，我們建立一個新的專案資料夾，並在終端機中進入該資料夾。使用 npm 初始化專案：

mkdir my-infographic-project
cd my-infographic-project
npm init -y  # 這會建立一個預設的 package.json 檔案

3. 安裝 AntV Infographic：

在專案資料夾中，使用 npm 安裝 Infographic：

npm install @antv/infographic

4. 撰寫你的第一個 Infographic：

建立一個名為 index.js 的檔案，然後輸入以下程式碼：

import { Infographic } from '@antv/infographic';

// 建立 Infographic 實例
const infographic = new Infographic({
  container: '#container', // 這裡的 '#container' 是 HTML 元素 id，等等會在 HTML 中定義
  width: '100%',
  height: '500px',
  editable: true, // 允許在圖表中編輯 (方便測試)
});

// 使用 render() 方法渲染你的資訊圖表
infographic.render(`
infographic list-row-simple-horizontal-arrow
data
  items:
    - label: 數據收集
      desc: 收集相關數據
    - label: 數據分析
      desc: 分析數據找出趨勢
    - label: 資訊圖表製作
      desc: 視覺化呈現數據
    - label: 結果展示
      desc: 分享你的資訊圖表
`);

5. 建立 HTML 檔案：

建立一個名為 index.html 的檔案，並加入以下程式碼：

<!DOCTYPE html>
<html>
<head>
  <title>我的第一個 Infographic</title>
</head>
<body>
  <div id="container" style="width: 80%; margin: 20px auto;"></div>  <!-- 這裡的 id 要和 index.js 裡面的 container 匹配 -->
  <script type="module" src="index.js"></script>
</body>
</html>

6. 執行你的程式：

在終端機中，使用以下指令來執行你的程式：

npx serve

npx serve 是一個簡單的靜態伺服器，方便你在瀏覽器中預覽你的作品。執行後，它會給你一個網址（通常是 `http://localhost:5000` 或類似的）。打開瀏覽器，輸入該網址，你就可以看到你的第一個資訊圖表了！

核心概念：聲明式語法解析

AntV Infographic 的核心，就是它的聲明式語法。讓我們來拆解一下上面程式碼的語法：

infographic list-row-simple-horizontal-arrow: 這定義了你要使用的圖表類型。這裡選擇的是一個簡單的水平流程圖。 AntV Infographic 提供了各種各樣的圖表類型，例如柱狀圖、折線圖、圓餅圖等等。你可以到他們的官方網站的 Gallery 看看有哪些選擇。
data: 這是定義你的數據的地方。
items: items 是一個陣列，每個元素代表圖表中的一個項目。
label 和 desc: 這是每個項目的屬性，label 是項目的標題，desc 是項目的描述。

透過這種簡單的語法，你可以輕鬆地定義數據，並告訴 Infographic 如何呈現。你不需要知道底層的繪圖原理，只需要專注於數據和呈現方式。

更多玩法：進階應用與客製化

恭喜你！你已經成功地製作了第一個資訊圖表。接下來，我們可以探索更多進階的功能，讓你的資訊圖表更上一層樓：

更換圖表類型： 試著把 list-row-simple-horizontal-arrow 換成其他的圖表類型，例如 bar-basic (基本柱狀圖) 或 pie-basic (基本圓餅圖)。你可以從官方文件或 Gallery 找到各種圖表類型的名稱。

調整樣式： Infographic 提供了豐富的樣式設定，例如顏色、字體、背景等等。你可以在 render() 方法中加入 style 參數來設定樣式。例如：

infographic.render(`
infographic bar-basic
data
  items:
    - label: 第一季度
      value: 150
    - label: 第二季度
      value: 200
  style
    colors: ['#5B8FF9', '#61DDAA']
`);

使用 AI 生成： Infographic 支援 AI 生成資訊圖表。你可以在 render() 方法中使用 AI 提示詞。像是這樣:
```
infographic.render(
  '使用柱狀圖呈現台灣 2023 年不同月份的平均氣溫。 數據範例： 1月 15度, 2月 16度, 3月 20度...'
);
```
Infographic 會自動生成符合提示詞的資訊圖表。這個功能真的超酷的！
互動性： Infographic 支援互動，你可以為圖表添加點擊事件、滑鼠懸停效果等等。這需要你進一步學習 JavaScript 的相關知識，但可以讓你的資訊圖表更具吸引力。

錯誤排除指南：常見問題與解決方案

在使用 AntV Infographic 的過程中，你可能會遇到一些問題。這裡列出一些常見的問題和解決方案：

圖表沒有顯示：
- 檢查 HTML 檔案： 確保你的 HTML 檔案正確，並且 <script> 標籤中引入了 index.js。
- 檢查 container： 確認你在 index.js 中指定的 container ID 與 HTML 檔案中的 <div> 元素的 ID 一致。
- 檢查瀏覽器控制台： 打開瀏覽器的開發者工具（通常按 F12 鍵），查看是否有任何錯誤訊息。錯誤訊息可以幫助你找到問題所在。
- 檢查檔案路徑： 確認你的 index.html 和 index.js 檔案在同一個資料夾，或是在正確的相對路徑下。
樣式沒有生效：
- 檢查 style 語法： 確認你的 style 語法正確。可以參考官方文件，了解各種樣式選項的用法。
- 清除瀏覽器快取： 有時候瀏覽器會快取舊的程式碼。清除瀏覽器快取，或是在瀏覽器中強制重新整理（通常是 Ctrl+Shift+R 或 Cmd+Shift+R）。
AI 生成結果不符合預期：
- 修改提示詞： 嘗試修改你的 AI 提示詞，使其更明確、更具體。例如，你可以指定圖表的顏色、字體等等。
- 調整參數： Infographic 的 AI 功能可能還有一些參數可以調整，請參考官方文件了解更多。

實作心得：我的 Infographic 學習旅程

我第一次接觸 AntV Infographic 的時候，也被它的簡單易用性給震驚到了。我過去需要花費大量時間來調整圖表，但現在，我可以快速地將數據視覺化，並且專注於訊息的傳達。

我建議你在學習 Infographic 的過程中，可以從以下幾點著手：

從簡單的模板開始： 先嘗試使用內建的模板，了解不同圖表類型的特性。
多看官方範例： 官方網站提供了大量的範例，可以幫助你快速上手。
動手實作： 不要只是看，要動手做！嘗試不同的數據，不同的圖表類型，你就能更深入地理解 Infographic。
參考文件： 官方文件非常詳細，遇到問題時，先查閱文件，通常都能找到答案。
探索 AI 功能： AI 生成資訊圖表真的非常方便，可以節省你大量的時間。善用這個功能，讓你的工作更有效率！

結論：用 AntV Infographic 提升你的數據溝通力

AntV Infographic 是一個非常棒的工具，可以幫助你輕鬆製作出令人印象深刻的資訊圖表。無論你是學生、上班族，還是對數據視覺化有興趣的人，都非常推薦你嘗試。透過學習 Infographic，你可以提升你的數據溝通能力，讓你的資訊更清晰、更吸引人！

希望這篇文章對你有所幫助！現在就開始你的 Infographic 旅程吧，一起用數據說故事！

參考閱讀

https://github.com/antvis/Infographic

發佈留言取消回覆

Related Stories

[無偏見報導]2026台灣：易卦示警停滯，政治人物期許，台海局勢挑戰。

[科技奇點]NCC 推平台申訴指引，促透明化，改善數位體驗。

[無偏見報導]台灣少子化惡化，新生兒恐跌破8萬，經濟壓力是關鍵。

You may have missed