chartjs 插件数据标签不在图表上显示值

Question

我正在尝试使用 chartjs datalabels 插件获取每个柱上的值。 所以上面的柱子 'a' a 想看数字 30 及以上或里面的柱子 'b' 我想看数字 50.

但它根本没有显示任何值。

谁能帮忙告诉我哪里出了问题？

我也尝试过使用不同版本的 chartjs，但没有用。

目前我正在使用 Chartjs 3.2.0 以及 chartjs-plugin-datalabels 2.0.0

这里是codesandbox中的例子 https://codesandbox.io/s/chart-js-plugin-5ez9p?file=/src/App.tsx

Answer 1

根据 documentation 您仍然需要注册插件才能使用它：

import {Chart} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.register(ChartDataLabels);

工作代码和框：https://codesandbox.io/s/chart-js-plugin-forked-dig8k?file=/src/App.tsx

Answer 2

首先你需要注册 chartjs-plugin-datalabels plugin.

对于注册，您还可以将插件道具添加到您的 TsChart。

1. 从“chartjs-plugin-datalabels”导入 ChartDataLabels；

2. 在 TsChart 标签中添加接受

   的插件道具

Chart.PluginServiceRegistrationOptions[]
 
Eg. **TsChart type="bar" data={data} options={options} plugins={[ChartDataLabels]}**