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