图表

图表组件基于 Chart.js，一个开源的 HTML5 图表库。

导入#


import { Chart } from 'primereact/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} 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" />

雷达图#

雷达图是一种图形方法，用于以二维图表的形式显示多元数据，该图表在从同一点开始的轴上表示三个或多个定量变量。


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

组合图#

可以使用数据集的 type 选项在同一图形中组合不同的图表类型。


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

可访问性#

屏幕阅读器

图表组件在内部使用 canvas 元素，请参考 Chart.js 可访问性指南以获取更多信息。可以使用 pt 属性自定义画布元素以定义 aria 角色和属性，此外，组件内的任何内容都直接作为画布的子级传递，以便能够提供备用内容，例如表格。


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

<Chart type="line" data={data}>
    <DataTable />
</Chart>