建立圖表

本章節主要是在說明建立圖表物件、以及圖表物件所能使用的相關參數。

圖表類別

依照所需要的資料類別需使用不同的圖表類別來建立，依照 6 種資料類別分別對應了 6 個圖表類別：

• SeriesChart
• GridChart
• MultiGridChart
• MultiValueChart
• RelationshipChart
• TreeChart

引入方式：

import { SeriesChart } from 'orbcharts'

語法

6 種圖表類別的語法和參數都是一樣的，在這邊使用 SeriesChart 來作示範：

<div id="#chart"></div>

import { SeriesChart } from 'orbcharts'

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

const chart = new SeriesChart(element)

如上範例，物件類別有一個必要參數是 DOM 元素，他會是 OrbCharts 進行繪圖的根節點。

而第二個參數是可選的，在後面會說明：

const chart = new SeriesChart(element, {
  // options  
})

透過物件類別的建構式回傳回來 chart 物件就完成建立了圖表物件，要進行繪圖以及互動時都會是在這個 chart 物件上進行操作和繪製圖表。

圖表類別參數

第 1 個參數：element

• 型別：HTMLElement | Element

• 說明：選取用來繪製圖表的 DOM 元素，所以的圖表 SVG 元素將會以此元素作為根節點來填加上去。

第 2 個參數：options

• 型別：ChartOptionsPartial<T extends ChartType>

• 說明：可選的參數設定，如無設定則全為預設值

名稱	說明	型別
preset	圖表的「預設集」，用來取代原有的預設參數	PresetPartial<T extends ChartType>
width	繪製 SVG 的寬度，如無設定或使用 auto OrbCharts會自動監聽外層 Dom 物件的寬度自適應調整	'auto'
height	繪製 SVG 的高度，如無設定或使用 auto OrbCharts會自動監聽外層 Dom 物件的高度自適應調整	'auto'

• 預設值：

{
  preset: null,
  width: 'auto',
  height: 'auto'
}

options.preset（預設集）

Preset 是一個可以用來覆蓋系統預設值的設定物件，使用方式有兩種，一個是使用 OrbCharts 內建的 Preset，另一種方式是自訂 Preset，更詳細的 Preset API 及使用方式請參考 Preset 的說明章節。

內建 Preset 使用範例：

import { SeriesChart, PRESET_PIE_DONUT } from 'orbcharts'

const chart = new SeriesChart(element, {
  preset: PRESET_PIE_DONUT
})

自訂 Preset 範例：

import { SeriesChart, Pie } from 'orbcharts'

const chart = new SeriesChart(element, {
  preset: {
    chartParams: {
      padding: {
        top: 10,
        right: 10,
        left: 10,
        bottom: 10
      }
    }
  }
})

options.width, options.height（圖表尺寸）

OrbCharts 預設就會監聽外層 Dom 進行自適應調整尺寸，所以要設定圖表尺寸，可以只設定 Dom 的尺寸即可

<div id="chart" style="width:1024px;height:500px;"></div>

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

另一種方式，也可以透過圖表類別的 Options 參數設定 width 和 height：

<div id="chart"></div>

const element = document.querySelector('#chart')
const chart = new SeriesChart(element, {
  width: 1024,
  height: 500
})