关于reactjs：如何在react-chartjs-2中显示每个条的值

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

我有一个关于react-chartjs-2中的条形图的问题。我在应用程序中使用react-chartjs-2制作了条形图和饼图。

我可以使用名为Chart.PieceLabel.js的插件显示饼图的价值。但是我找不到条形图的插件。我想将每个条形的值显示为与饼图相同。

条形图中的每个条形都可以估值吗？

当前视图是这样的。在饼图中，将显示每个切片的值。

enter image description here

这是我的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

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(

<Pie style={{"fontSize" :"20px" }} data={data} options={pieOptions}/>
<HorizontalBar
ref='chart'
data={bardata}
width={100}
height={50}
options={{
maintainAspectRatio: false
}}
/>

{this.state.slideOpen? <img src={Arrowup} alt="arrowup" className="arrowup" /> : <img src={Arrowdown} alt="arrowdown" className="arrowdown"/>}

<List parentToggle={this.doParentToggle} />
<ListSecond parentToggle={this.doParentToggle} />
<ListThird parentToggle={this.doParentToggle} />
<ListFourth parentToggle={this.doParentToggle} />
<ListFifth parentToggle={this.doParentToggle} />

)
}
}

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