チャートコンポーネントは、オープンソースのHTML5ベースのチャートライブラリであるChart.jsに基づいています。
import Chart from 'primevue/chart';
Chartコンポーネントは内部でChart.JSを使用しているため、依存関係としてインストールする必要があります。
npm install chart.js
チャートは、_type_、_data_、_options_の3つのプロパティで設定されます。チャートタイプは、値として_pie_、_doughtnut_、_line_、_bar_、_radar_、_polarArea_を受け入れる_type_プロパティを使用して定義されます。 _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]" />
レーダーチャートは、同じ点から始まる軸上に表される3つ以上の量的変数の2次元チャートの形式で、多変量データをグラフィカルに表示する方法です。
<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
データセットの_type_オプションを使用して、異なるチャートタイプを同じグラフに組み合わせることができます。
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
Chartコンポーネントは内部で_canvas_要素を使用します。詳細については、Chart.jsアクセシビリティガイドを参照してください。 _canvasProps_プロパティを使用してcanvas要素をカスタマイズし、ariaの役割とプロパティを定義できます。さらに、コンポーネント内のコンテンツは、テーブルなどのフォールバックコンテンツを提供できるように、canvasの子として直接渡されます。
<Chart type="line" :data="data" :canvasProps="{'role': 'img', 'aria-label': 'Data'}" />