[英]Is it a bug? Value of pie chart showed twice react-chart.js and Chart.PieceLabel.js
I made a pie chart using react-chart.js and Chart.PieceLabel.js. 我使用react-chart.js和Chart.PieceLabel.js制作了一个饼图。 I could show the value of slice of pie chart.
我可以显示饼图切片的价值。 I could show the value with % thanks to this question Displaying pie chart data value of each slices using react-chartjs-2
由于这个问题,我可以用%来显示值。使用react-chartjs-2显示每个切片的饼图数据值
However, strangely two value (one with white and the other with black) showed up. 但是,奇怪的是出现了两个值(一个带有白色,另一个带有黑色)。
How can I remove the one of value? 如何去除价值之一? I want to remove the black one.
我要删除黑色的。
Here is the image. 这是图片。
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: 30,
fontColor: '#fff'
}
};
const bardata = {
labels: ['1', '2', '3', '4', '5'],
datasets: [
{
backgroundColor: [
'orange',
'blue',
'red',
'purple',
'green'
],
borderColor: 'black',
borderWidth: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [ newpiData(), newpiData2() , newpiData3() , newpiData4() , newpiData5() ]
}
]
};
let options = {
plugins: {
datalabels: {
display: true,
color: 'white',
},
font: {
weight: 'bold'
}
}
}
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>
)
}
}
Seems like this is causing because of the chartjs-plugin-datalabels
plugin. 似乎是由于
chartjs-plugin-datalabels
插件引起的。
By default it shows data labels on all available charts, and to make it not show the labels on a particular chart, you need to set the display
property to false
. 默认情况下,它在所有可用图表上显示数据标签,并且要使其不在特定图表上显示标签,您需要将
display
属性设置为false
。 So, in your case set the following option inside pieOptions
: 因此,在您的情况下,请在
pieOptions
设置以下选项:
plugins: {
datalabels: {
display: false
}
}
Here is the working example 这是工作示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.