チャート

チャートコンポーネントは、オープンソースのHTML5ベースのチャートライブラリであるChart.jsに基づいています。

インポート#


import { Chart } from 'primereact/chart';
         

Chart.js#

チャートコンポーネントは内部で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} className="w-full md:w-30rem" />
         

ドーナツグラフ#

ドーナツグラフは円グラフのバリエーションであり、中央が空いており、データ全体の追加情報を含めることができます。


<Chart type="doughnut" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
         

垂直棒グラフ#

棒グラフは、グループ化されたデータを、長さが表す値に比例した長方形の棒で表示するグラフです。


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

水平棒グラフ#

indexAxisオプションがyに設定されている場合、棒グラフは水平方向にレンダリングされます。


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

積み上げ棒グラフ#

スケールのstackedオプションが有効になっている場合、棒は互いに積み重ねられます。


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

折れ線グラフ#

折れ線グラフは、'マーカー'と呼ばれる一連のデータ点を直線セグメントで接続して情報を表示するタイプのグラフです。


<Chart type="line" data={chartData} options={chartOptions} />
         

複数軸#

scalesオプションを使用して複数の軸を追加できます。


<Chart type="line" data={chartData} options={chartOptions} />
         

線種#

線シリーズのさまざまなスタイルをカスタマイズして、エリアチャートなどのカスタマイズを表示できます。


<Chart type="line" data={chartData} options={chartOptions} />
         

極座標エリアグラフ#

極座標エリアグラフは円グラフに似ていますが、各セグメントの角度は同じで、セグメントの半径は値によって異なります。


<Chart type="polarArea" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
         

レーダーチャート#

レーダーチャートは、同じ点から始まる軸上に表される3つ以上の数量変数の形で、多変量データを2次元チャートとして表示するグラフィカルな方法です。


<Chart type="radar" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
         

複合グラフ#

データセットのtypeオプションを使用して、同じグラフに異なるチャートの種類を組み合わせることができます。


<Chart type="line" data={chartData} options={chartOptions} />
         

アクセシビリティ#

スクリーンリーダー

チャートコンポーネントは内部でcanvas要素を使用しています。詳細については、 Chart.jsアクセシビリティ ガイドを参照してください。canvas要素は、ariaロールとプロパティを定義するptプロパティを使用してカスタマイズできます。さらに、コンポーネント内のコンテンツは、テーブルのような代替コンテンツを提供できるように、canvasの子として直接渡されます。


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

<Chart type="line" data={data}>
    <DataTable />
</Chart>
         
                                PrimeReact 10.8.3 by PrimeTek