本文介绍了无法调整 react-chartjs-2 圆环图的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试用 react 和 gatsbyjs 制作一个甜甜圈图.该图表工作正常，但我无法让它使用 div 的整个宽度.对于保留的区域，它显示得太小.
I am trying to make a doughnut chart with react and gatsbyjs. The chart works fine but I can not get it to use the full width of the div. It displays too small for the area reserved.
render (){
return (
<Doughnut
data={this.state.chartData}
options={{
padding:"0px",
responsive:false,
maintainAspectRatio:false,
defaultFontSize:"14px",
width:"400",
height:"400",
legend:{
display:false,
},
plugins:{
datalabels: {
color:'#000000',
anchor: "start",
align:"end",
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
}
}
}
}}
/>
)
}
推荐答案
看看 响应式下的">chartjs docs.
Have a look in the chartjs docs under responsive.
在选项中，设置responsive: true、maintainAspectRatio: true并去掉width和height.
In the options, set responsive: true, maintainAspectRatio: true and remove width and height.
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import { Doughnut } from 'react-chartjs-2'
class App extends Component {
constructor() {
super();
this.state = {
name: 'React',
data: {
datasets: [{
data: [10, 20, 30]
}],
labels: [
'Red',
'Yellow',
'Blue'
]
}
}
}
render() {
return (
<Doughnut
data={this.state.data}
options={{
responsive: true,
maintainAspectRatio: true,
}}
/>
)
}
}
render(<App />, document.getElementById('root'));这是一个有效的 StackBlitz
这篇关于无法调整 react-chartjs-2 圆环图的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！