使用 PrimeReact 和 Chart.js 显示 BarGraph 的注释

Question

我们在一个项目中使用了 Prime React，并且需要在其中一个页面中显示条形图（直方图）。

我已经进行了更改，它显示了图表，但在一些条形图上方我们需要显示一个图标，我无法弄清楚如何在条形图顶部显示图标和文本。 我在chart.js中看到有一个名为chartjs-plugin-annotation的插件（[url]https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/[/url]）我无法在我当前的设置中使用它。

我想要实现的目标是https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/label/basic.html

const options = {
    maintainAspectRatio: false,
    aspectRatio: 0.8,
    plugins: {
      legend: {
        labels: {
          fontColor: textColor
        },
        display: false
      },
      annotation: {
        annotations: {
          // define annotations here
        }
      }
    },
    scales: {
      x: {
        stacked: true,
        ticks: {
          color: textColorSecondary,
          font: {
            weight: 500
          }
        },
        grid: {
          display: false,
          drawBorder: false
        }
      },
      y: {
        stacked: true,
        ticks: {
          color: textColorSecondary
        },
        grid: {
          display: false,
          drawBorder: false
        }
      }
    }
  };
  
  const pureCostDatasets = [
    {
      type: 'bar',
      label: 'Storage Hardware',
      backgroundColor: PURE_DATA_COLORS.ORANGE,
      data: [50, 25, 12, 48, 90, 76, 42],
      stack: 'Stack 0',
      barPercentage: barWidth,
      categoryPercentage: categoryWidth
    },
    {
      type: 'bar',
      label: 'Support and Services',
      backgroundColor: PURE_DATA_COLORS.LIGHT_ORANGE,
      data: [21, 84, 24, 75, 37, 65, 34],
      stack: 'Stack 0',
      barPercentage: barWidth,
      categoryPercentage: categoryWidth
    },
    {
      type: 'bar',
      label: 'Credit',
      backgroundColor: PURE_DATA_COLORS.GRAY,
      data: [-25, 0, 0, 0, 0, 0, 0],
      stack: 'Stack 0',
      barPercentage: barWidth,
      categoryPercentage: categoryWidth
    }
  ];
  
  <Chart type="bar" data={pureCostDatasets} options={chartOptions} />

有人可以帮我解决这个问题吗？ :(

Answer 1

我有一个工作示例：https://stackblitz.com/edit/react-s2tmyz-n1nmzj

您缺少正确注册插件。

import React, { useState, useEffect } from 'react';
import { Chart as PrimeChart } from 'primereact/chart';
import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';

Chart.register(annotationPlugin);