組件使用形式上可以大致分成三種：
-
聲明式
如echarts中json配置方式
{ "x": "time", "y": "price", "series": [ ... ] }
-
命令式
如d3
const chart = new Chart ();
chart.addAxis ( new XAxis (...));
chart.addSeries ( new LineSeries (...));
-
組件式
在react或vue中使用，如react-though
<Chart>
<XAxis />
<LineSeries />
</Chart>
按抽象層次可分：
-
圖形操作庫(kù)(Graphics Libraries)
它們可表達(dá)能力最強(qiáng)，同時(shí)開(kāi)發(fā)成本也最高，更接近原生的API，Canvas、WebGL。
這類庫(kù)有：Processing, p5*js, Raphael, Rough.js, three.js, PhiloGL, luma.gl, two.js, PixiJS, react-rough, react-three-fiber。 -
低抽象搭建單元(Low-level Building Blocks)
非常獨(dú)立也非常靈活。這類庫(kù)中的組件有各自明確的作用，可以組合使用（也可和其他庫(kù)組合）創(chuàng)造出圖表。組合方式有大致的約束條件，留給開(kāi)發(fā)很大的發(fā)揮空間。
最經(jīng)典的例子就是D3
const x = d3.scaleBand().rangeRound([0, width]);
const y = d3.scaleLinear().range([height, 0]);
const svg = d3.select("svg").attr("width", width).attr("height", height);
x.domain(data.map(d = >d.date));
y.domain([0, d3.max(data, d = >d.value)]);
svg.selectAll("bar").data(data).enter().append("rect").style("fill", "steelblue").attr("x", d = >x(d.date)).attr("width", x.band()).attr("y", d = >y(d.value)).attr("height", d = >(height - y(d.value)));
-
圖形語(yǔ)法庫(kù)(Visualization Grammars)
介于高抽象搭建單元和底抽象搭建單元之間。典型的庫(kù)有ggplot2、Vega-Lite、G2、Muze。
與英語(yǔ)等語(yǔ)言的語(yǔ)法如何定義詞性（名詞、動(dòng)詞等）并給出將這些詞性組合成有意義的句子的結(jié)構(gòu)類似，圖形語(yǔ)法也定義了自己的部分，并提供了一種將它們組合起來(lái)描述輸出圖形的結(jié)構(gòu)。這種嚴(yán)格的結(jié)構(gòu)正是它們區(qū)別于低抽象搭建單元的原因。統(tǒng)計(jì)圖表使用可以分成以下六個(gè)部分來(lái)描述：
DATA：從數(shù)據(jù)集創(chuàng)建變量的一些操作
TRANS：各種數(shù)據(jù)轉(zhuǎn)換（例如排序）
SCALE：數(shù)量級(jí)變換（例如log）
COORD：坐標(biāo)系（例如極坐標(biāo)）
ELEMENT：圖形（例如點(diǎn)）以及對(duì)應(yīng)的視覺(jué)屬性（顏色等）
GUIDE：一些輔助元素（例如坐標(biāo)軸、圖例等）
-
高抽象搭建單元(High-level Building Blocks)
典型的庫(kù)有ECharts、Highcharts、Plotly、deck.gl，以及基于React的Victory、 React-Vis、 Semiotic。
如果低抽象搭建單元相當(dāng)于樂(lè)高塊，可以非常自由地進(jìn)行各式各樣的組合，這些高抽象搭建單元就像提前組裝好的較大模塊。
與圖形語(yǔ)法類似，高抽象搭建單元需要以一定的規(guī)則和其他組件組合才能創(chuàng)造出一個(gè)圖表。不過(guò)，兩者之間有些常見(jiàn)的不同之處：
- 有些圖表庫(kù)將坐標(biāo)軸和數(shù)據(jù)量變換結(jié)合起來(lái)。而在圖形語(yǔ)法中SCALE是一個(gè)組件，而坐標(biāo)軸只是GUIDE中的一部分；
- 高抽象搭建單元庫(kù)會(huì)在各種地方灌入數(shù)據(jù)，通常是隨著樣式系列設(shè)置中。而圖形語(yǔ)法將數(shù)據(jù)處理（DATA）和數(shù)據(jù)轉(zhuǎn)換（TRANS）分開(kāi)，只有在ELEMENT 模塊中會(huì)引用字段名或者變量；
- 它是更寬泛意義上的“無(wú)圖表類型”，也會(huì)包含一些為更加復(fù)雜圖表而封裝特殊邏輯的系列或者圖層，比如河流圖。這種其實(shí)更接近第5個(gè)分類——圖表組件庫(kù)。不過(guò)，它仍然不像圖表組件庫(kù)那樣添加一個(gè)圖表類型就能開(kāi)發(fā)出一個(gè)完整的圖表。
舉個(gè)例子，箱線圖可以用圖形語(yǔ)法描述成柱圖和線圖的圖層組合（例如Vega-Lite就會(huì)這么做）。在高抽象層次的圖表庫(kù)，可能為了方便起見(jiàn)，會(huì)定義一個(gè)組合兩個(gè)圖層并且封裝交互邏輯的CandlestickSeries組件。然后用CandlestickSeries圖層再加上坐標(biāo)軸、網(wǎng)格線，即可創(chuàng)建出箱線圖。而圖表組件庫(kù)會(huì)直接提供一個(gè)包含坐標(biāo)軸、網(wǎng)絡(luò)線等所有元素的CandlestickChart組件，開(kāi)發(fā)者只需要灌入數(shù)據(jù)即可。
-
圖表組件庫(kù)(Chart Templates)
圖表庫(kù)的最大優(yōu)點(diǎn)在于開(kāi)箱即用，上手方便。開(kāi)發(fā)者只需要選擇一種圖表類型，將準(zhǔn)備好的數(shù)據(jù)處理成要求的格式灌入即可。
這類圖表庫(kù)可以只有一個(gè)圖表組件，也可以數(shù)百個(gè)圖表組件。每個(gè)組件通過(guò)圖表類型來(lái)引用，比如Bar（柱圖）、Pie（餅圖）、Area（面積圖）、Calendar（日歷圖）等。
有些庫(kù)提供了幾種不同抽象層次的封裝。例如：
dc.js 既有圖表組件，又有高抽象搭建單元
G2Plot 是基于圖表語(yǔ)法庫(kù)G2上的圖表組件庫(kù)
react-vis 既有高抽象搭建單元，也有圖表組件
而D3事實(shí)上也是穿梭于幾個(gè)層級(jí)之間。例如，d3-scale 從圖形語(yǔ)法的層面定義了scale的模塊；而 d3-shape更接近于底層圖形庫(kù)。
