无法调整react-chartjs-2圆环图的大小
无法调整react-chartjs-2圆环图的大小
提问于 2018-12-21 00:04:21
我正在尝试用react和gatsbyjs制作一个甜甜圈图表。图表运行得很好，但我无法让它使用div的整个宽度。对于保留的区域，它显示得太小。
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];
}
}
}
}}
/>
)
}回答 2
Stack Overflow用户
发布于 2018-12-21 06:34:51
在responsive下的chartjs docs中查看一下。
在选项中，设置responsive: true, maintainAspectRatio: true并删除width和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
Stack Overflow用户
发布于 2020-11-17 21:18:07
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: false,
}}
/>
)
}
}
render(<App />, document.getElementById('root'));
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53872165
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号