如何在 react-chartjs-2 中显示每个柱的值

Question

我对 react-chartjs-2 中的条形图有疑问。我在我的应用程序中使用 react-chartjs-2 制作了条形图和饼图。

我可以使用 plugin 调用 Chart.PieceLabel.js 来显示饼图的值。但是我找不到条形图的插件。 我想像饼图一样显示每个条形图的值。

是否可以计算条形图中每个条形的值？

当前视图是这样的。在饼图中，出现每个切片的值。

这是我的代码

export default class Categories extends React.Component{
constructor(props){
    super(props);
    this.state = {
        slideOpen : false,
        piData : piData
      }

this.handleClick = this.handleClick.bind(this);
this.update = this.update.bind(this);
this.doParentToggle = this.doParentToggle.bind(this);
}

doParentToggle(){


this.setState({
    piData : piData
  })
  this.update();
  }

handleClick(){
    this.setState({
        slideOpen : !this.state.slideOpen
    })
    }

update() {
  var piData;
  this.setState({
    piData : piData
  })
}    

  componentDidMount() {
    let ctx = this.refs.chart.chart_instance.chart.ctx;
    console.log(this.refs.chart.chart_instance.chart.ctx); // returns a Chart.js instance reference
    this.refs.chart.chart_instance.chart.config.data.datasets.forEach(function (dataset) {
                if(dataset.type === 'bar'){
                    const dataArray = dataset.data;
                    dataset._meta[0].data.forEach(function (bar, index) {
                        ctx.fillText(dataArray[index], bar._view.x, bar._view.y);
                    });
                };
            })
  }

render(){


 const CategoriesPanel = this.state.slideOpen? "slideOpen" : "";
 const { length } = this.props


  var totalData = piData + piData2 + piData3 + piData4 + piData5;

   let newpiData =  function() {
   return parseFloat((piData /  totalData ) * 100 ).toFixed(2) };

   let newpiData2 =  function() {
   return parseFloat((piData2 /  totalData ) * 100).toFixed(2) };

   let newpiData3 =  function() {
   return  parseFloat((piData3 /  totalData ) * 100).toFixed(2) };

   let newpiData4 =  function() {
   return parseFloat((piData4 /  totalData ) * 100).toFixed(2) };

   let newpiData5 =  function() {
   return parseFloat((piData5 /  totalData ) * 100).toFixed(2) };

  const data = {
  datasets: [{
    data: [ newpiData() , newpiData2(), newpiData3(), newpiData4(), newpiData5()],
    backgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
    borderColor: [ 
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ]
  }]};

  var pieOptions = {
      pieceLabel: {
     render: function (args) {
              return args.value + '%';
            },
     fontSize: 40,
     fontColor: '#fff'
   }
  };

  const bardata = {
  labels: ['1', '2', '3', '4', '5'],
  datasets: [
   {
  backgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
  borderColor: 'black',
  borderWidth: 3,
  hoverBackgroundColor: 'rgba(255,99,132,0.4)',
  hoverBorderColor: 'rgba(255,99,132,1)',
  data: [ piData , piData, piData , piData , piData ]
  }
  ]
  };

  return(
<div>
<div id="chart" className={CategoriesPanel}>
<div style={{"display" : "flex"}}>
<Pie style={{"fontSize" : "20px" }} data={data} options={pieOptions}/>
<HorizontalBar
      ref='chart'
      data={bardata}
      width={100}
      height={50}
      options={{
        maintainAspectRatio: false
      }}
    />
  </div>
 </div>
<div className="categoriesSlide" onClick={this.handleClick}>{this.state.slideOpen? <img src={Arrowup} alt="arrowup" className="arrowup" /> : <img src={Arrowdown} alt="arrowdown" className="arrowdown"/>}</div>
 <div className="clear">
 <List parentToggle={this.doParentToggle} />
 <ListSecond parentToggle={this.doParentToggle} />
 <ListThird parentToggle={this.doParentToggle} />
 <ListFourth parentToggle={this.doParentToggle} />
 <ListFifth parentToggle={this.doParentToggle} />

 </div>
 </div>
    )
}
}

感谢您的帮助，感谢您花时间阅读我的问题。

Answer 1

要在每个柱上显示数据值，您可以使用名为的插件：chartjs-plugin-datalabels

安装（通过 npm）

npm install chartjs-plugin-datalabels --save

导入（在组件中）

import 'chartjs-plugin-datalabels';

选项（显示值）

plugins: {
   datalabels: {
      display: true,
      color: 'white'
   }
}

^{* 在图表选项中添加这个}

查看数据标签插件的所有可用选项here。

Answer 2

如果您将它用于 React 应用程序，请在主 index.js 文件中导入 'chartjs-plugin-datalabels'。这将自动为所有图表添加数据标签。为了从特定图表中删除不需要的数据标签，请将以下内容添加到相应的选项对象中：

options = { plugins: { datalabels: { display: false }}}

Answer 3

首先安装chartjs-plugin-datalabels

npm install chartjs-plugin-datalabels --save

然后导入它 Chart.js

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

那就注册吧

const MyFunction = () => {
   Chart.plugins.register(ChartDataLabels);
...
}

最后在选项中使用它

 options: {
  plugins: {
    datalabels: {
      color: '#36A2EB'
    }
  }
}

您可以在 website

中找到此信息

如何在 react-chartjs-2 中显示每个柱的值

How to show value of each bar in react-chartjs-2

reactjs

charts

bar-chart

react-chartjs