我正在尝试使用 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];
}
}
}
}}
/>
)
}
看看Chartjs 文档 under 反应灵敏.
在选项中设置responsive: true, maintainAspectRatio: true
并删除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'));
这是一个工作堆栈闪电战
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)