安裝
支援環境
OrbCharts 支援 CDN 下載及 npm 安裝方式，使用 ESM 模組化標準，不受限於特定的前端框架，同時支援 Javascript 以及 Typescript 開發環境。
在前端框架中使用
OrbCharts 繪製圖表的方式是直接在 Dom 元素上繪製出 SVG 圖形，並不依賴特定前端框架技術，所以理論上 OrbCharts 可以在所有主流前端框架（e.g. React, Vue, Angular）中使用。
WARNING
需要注意的是，由於目前並不支援虛擬 Dom 的渲染技術，引入 OrbCharts 程式模組時必須確保他是在 client-side（瀏覽器端）中執行，當使用含有 SSR (Server-Side Render) 技術的前端框架時，需注意引入 OrbCharts 程式模組的生命週期是在 client-side 而不是 server-side。
在某些情況這類型的錯誤有可能不會在本機端開發模式中被發現（程式中斷並報錯的情況），會在打包程式後才會發生 server-side 的渲染發生錯誤。
npm 安裝
使用以下指令即可將所有 OrbCharts 程式模組安裝至你的專案當中：
npm i orbcharts
範例 - 在 Nuxt 框架中使用
Nuxt 是一個基於 Vue 的 SSR 框架，所以跟 Dom 有關的操作必須在 onMounted 生命週期 (client-side) 中進行，OrbCharts 的物件也必須在 client-side 中被引用和呼叫。
<template>
<div id="chart"></div>
</template>
<script setup>
import { SeriesChart, Pie, PRESET_PIE_BASIC } from 'orbcharts'
const props = defineProps({ data: Array })
const chart = ref()
// client-side
onMounted(() => {
const element = document.querySelector('#chart')
chart.value = new SeriesChart(element, {
preset: PRESET_PIE_BASIC
})
chart.value.plugins$.next([new Pie()])
watch(() => props.data, () => {
chart.value.data$.next(props.data ?? [])
}, { immediate: true })
})
</script>
在靜態網頁直接使用
目前 OrbCharts 提供 ESM 和 USM 兩種模組化標準，可依需求選擇使用。
CDN 下載
建議可使用 jsdelivr CDN 服務。
ESM 格式的語法：
<script type="module">
import * as orbcharts from 'https://cdn.jsdelivr.net/npm/orbcharts@3.0.0/+esm'
</script>
UMD 格式的語法
<script src="https://cdn.jsdelivr.net/npm/orbcharts@3.0.8/dist/orbcharts.umd.min.js"></script>
範例 - 在 HTML 網頁中使用 (ESM) 格式
<html>
<head>
<title>Demo ESM</title>
</head>
<body>
<div id="chart"></div>
<script type="module">
import { SeriesChart, PRESET_PIE_BASIC, Pie } from 'https://cdn.jsdelivr.net/npm/orbcharts@3.0.8/+esm'
const element = document.querySelector('#chart')
const chart = new SeriesChart(element, {
preset: PRESET_PIE_BASIC
})
chart.plugins$.next([new Pie()])
chart.data$.next([
[80,120,45],
[50,30,15,28],
[55,13,38,10,5]
])
</script>
</body>
</html>
範例 - 在 HTML 網頁中使用 (UMD) 格式
<html>
<head>
<title>Demo UMD</title>
</head>
<body>
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/orbcharts@3.0.8/dist/orbcharts.umd.min.js"></script>
<script>
const element = document.querySelector('#chart')
const chart = new orbcharts.SeriesChart(element, {
preset: orbcharts.PRESET_PIE_BASIC
})
chart.plugins$.next([new orbcharts.Pie()])
chart.data$.next([
[80,120,45],
[50,30,15,28],
[55,13,38,10,5]
])
</script>
</body>
</html>