指南

快速開始

安裝

OrbCharts 支援 CDN 下載及 npm 安裝方式，使用 ESM 模組化標準，不受限於特定的前端框架，同時支援 Javascript 以及 Typescript 開發環境。

以下幾種安裝方式：

  1. npm 安裝
npm i orbcharts
  1. ESM 格式的 CDN 下載
<script type="module">
import * as orbcharts from 'https://cdn.jsdelivr.net/npm/orbcharts@3.0.8/+esm'
</script>
  1. UMD 格式的 CDN 下載
<script src="https://cdn.jsdelivr.net/npm/orbcharts@3.0.8/dist/orbcharts.umd.min.js"></script>

執行

這是一個可執行的程式，可由此開始建立你的第一個圓餅圖：

import { SeriesChart, Pie } from 'orbcharts'

const element = document.querySelector('#chart')

const chart = new SeriesChart(element)

chart.plugins$.next([new Pie()])

chart.data$.next([
  [80,120,45],
  [50,30,15,28],
  [55,13,38,10,5]
])

你也可以在 展示頁 上試試看。

閱讀指南

OrbCharts的設計是一個可以開箱即用的套件，依照一般的使用情境提供了許多預設參數快速建立（也是「Preset」），另外也提供了大量的 API 可進行更細節的設定，提供給進階使用者更大的客製化彈性。

本文件的章節順序是由淺入深、由抽象到實作細節，你可以依照順序全部閱讀，也可以依照需求跳著閱讀或查閱也是非常適合的。以下介紹各個章節的內容大綱，你可以依照需求挑選閱讀：

【基本概念】

從 OrbCharts 基礎設計的邏輯，再帶到核心技術的介紹。這個章節對於要深入了解 OrbCharts 是最基礎的內容，也是循序漸進閱讀的第一個章節，但本章節內容不會直接提及到程式實作方式，對於想快速聚焦的使用者我們建議可以先跳過此章節，後續如果有需要的話再回頭來閱讀。

【快速開始 !】

第一次使用並且想快速建立可執行程式，建議可先直接看剛此章節所有內容，可以在很短的時間了解如何安裝在你的專案當中、並可以取得可執行的程式範例。

【基礎使用】

此章節將範圍聚焦在製作最基本圖表所須知道的語法、以及「必要」的 API 介紹，因此我們建議可以的話將此章節所有內容閱讀完；而其中「資料標籤」章節是依照 6 種資料分類來介紹的，可以依使用到的圖表類型選擇閱讀。

【圖表 API】

圖表物件所有 API 詳細規格文件，可以依照需求進行查閱：

  • plugins$ 建立 Plugin 必須使用的 API
  • data$ 建立資料必須使用的 API
  • chartParams$ 用來套用在所有 Plugins 上的共用參數，用作樣式調整（e.g. 間距、顏色、字體大小等）以及互動方式（e.g. highlight 對象等）
  • dataFormatter$ 依照 6 種資料格式分類，各個資料格式都有其特性依各別透過參數調整來修改圖表呈現的方式（e.g. 資料排序方式、連續資料對應的方式和標籤、圖軸標籤和範例等）
  • event$ 訂閱事件以取得相對應圖表元素上的資料格式
  • destroy() 回收圖表

【Plugins】

所有 Plugin 的參數 API。基本上使用 Preset 就已經符合大部份的參數調整的需求，但還是會有許多情況可能需要手動進行調整的，可以視需求來進行查閱。

關於我們

OrbCharts 是一個有機且持續開發與持續改進的專案，如果你有興趣參與到這個專案中歡迎至 Github 取得原始碼，可以用你喜歡的方式 fork 出去、或開 issue 告訴我們需要改進的地方。

對喔了，這是我們的 Logo：

  • Light Mode

logo - light mode

  • Dark Mode

logo - dark mode

License

OrbCharts 基於 Apache License 2.0 發布。