小编kri*_*rma的帖子

如何在react-chartjs-2中的条形图顶部显示数据值?

我在react-chartjs-2中制作了条形图。我想在条形顶部显示每个条形的数据值。为此,我使用了名为Chartjs-plugin-datalabels 的插件,但它没有显示任何内容。

是否可以显示条形图的每个值?

我想展示这样的数据价值。

在此输入图像描述

这是我的代码。

import React, { Component } from "react";
import "chartjs-plugin-datalabels";
import { Bar } from "react-chartjs-2";

export default class Button extends Component {
  render() {
    const dataBar = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "My First dataset",
          backgroundColor: "#EC932F",
          borderColor: "rgba(255,99,132,1)",
          borderWidth: 1,
          hoverBackgroundColor: "rgba(255,99,132,0.4)",
          hoverBorderColor: "rgba(255,99,132,1)",
          data: [65, 59, 80, 81, 56, 55, 40]
        }
      ]
    };

    const options = {
      plugins: {
        datalabels: {
          display: …
Run Code Online (Sandbox Code Playgroud)

bar-chart reactjs react-chartjs-2

7
推荐指数
1
解决办法
1万
查看次数

标签 统计

bar-chart ×1

react-chartjs-2 ×1

reactjs ×1