如何在 react-chartjs-2 的条形顶部显示数据值？答案

【问题标题】：How to show data value on top of bar in react-chartjs-2?如何在 react-chartjs-2 的条形顶部显示数据值？
【发布时间】：2021-05-23 09:29:08
【问题描述】：

我在 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: true,
          color: "black"
        }
      },
      legend: {
        display: false
      }
    };
    return (
      <div>
        <Bar data={dataBar} options={options} width={100} height={50} />
      </div>
    );
  }
}

任何帮助将不胜感激。

【问题讨论】：

你找到什么了吗？

标签： reactjs bar-chart react-chartjs-2

【解决方案1】：

import React, { Component } from "react";
import Chart from "chart.js/auto";
import ChartDataLabels from "chartjs-plugin-datalabels";
import { Bar } from "react-chartjs-2";

export default class Button extends Component {
  componentDidMount() {
    Chart.register(ChartDataLabels);
  }

  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: true,
          color: "black",
          formatter: Math.round,
          anchor: "end",
          offset: -20,
          align: "start"
        }
      },
      legend: {
        display: false
      }
    };
    return (
      <div>
        <Bar data={dataBar} options={options} width={100} height={50} />
      </div>
    );
  }
}

这里你可以看到在componentDidMount我们已经注册了图表数据标签插件来显示数据。另一件事是在选项中根据以下字段添加了更多参数

anchor: "end",
offset: -20,
align: "start"

这用于在顶部显示数据。

【讨论】：

【解决方案2】：

使用这个 "chartjs-plugin-datalabels": "^0.5.0" 版本

对我有用

这是工作示例

https://codesandbox.io/s/barchart-knycb

【讨论】：

【解决方案3】：

react-chartjs-2 包包含一个插件属性，可以在组件上设置。

更改导入来源：

import "chartjs-plugin-datalabels";

到：

import ChartDataLabels from 'chartjs-plugin-datalabels';

在您的组件上，添加保存导入值的插件变量。

来自：

<Line data={data} options={options} />

到：

<Line data={data} plugins={[ChartDataLabels]} options={options} />

看到这个original stackoverflow answer到类似的问题

【讨论】：