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

xn1cxnb4  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(205)

我们在一个项目中使用了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} />

谁能帮帮我:(

7tofc5zh

7tofc5zh1#

我有一个工作示例: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);

相关问题