圖表

圖表元件基於 Chart.js，一個開源的 HTML5 圖表庫。

匯入 #


import Chart from 'primevue/chart';

Chart.js #

圖表元件使用底層的 Chart.JS，因此需要將其安裝為依賴項。


npm install chart.js

基本 #

圖表透過 3 個屬性進行配置；type、data 和 options。圖表類型使用 type 屬性定義，它接受 pie、doughtnut、line、bar、radar 和 polarArea 作為值。data 定義以圖表表示的數據集，而 options 提供眾多自訂選項來自訂呈現方式。


<Chart type="bar" :data="chartData" :options="chartOptions" />

圓餅圖 #

圓餅圖是一種圓形統計圖，它被分成幾塊，以說明數值比例。


<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />

甜甜圈圖 #

甜甜圈圖是圓餅圖的變體，中心為空白，允許包含關於整體數據的額外資訊。


<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />

垂直長條圖 #

長條圖或柱狀圖是一種圖表，它用矩形長條表示分組數據，長條的長度與它們代表的值成比例。


<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]"  />

水平長條圖 #

當 indexAxis 選項設定為 y 時，長條圖會以水平方式呈現。


<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]"  />

堆疊長條圖 #

當尺度的 stacked 選項啟用時，長條可以彼此堆疊。


<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />

折線圖 #

折線圖是一種圖表，它將資訊顯示為一系列稱為「標記」的數據點，這些數據點由直線段連接。


<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />

多軸 #

可以使用 scales 選項新增多個軸。


<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />

線條樣式 #

可以自訂線條系列的各種樣式，以顯示諸如面積圖之類的自訂。


<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />

極地區域圖 #

極地區域圖類似於圓餅圖，但每個區段的角度相同 - 區段的半徑會根據值而不同。


<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />

雷達圖 #

雷達圖是一種以二維圖表形式顯示多變量數據的圖形方法，其中三個或多個定量變量在從同一個點開始的軸上表示。


<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />

組合圖 #

不同的圖表類型可以在同一個圖形中使用數據集的 type 選項組合。


<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />

無障礙 #

螢幕閱讀器

圖表元件在內部使用 canvas 元素，請參閱 Chart.js 無障礙指南以獲取更多資訊。可以使用 canvasProps 屬性自訂 canvas 元素，以定義 aria 角色和屬性，此外，元件內的任何內容都會直接作為 canvas 的子項傳遞，以便能夠提供諸如表格之類的後備內容。


<Chart type="line" :data="data" :canvasProps="{'role': 'img', 'aria-label': 'Data'}" />

圖表