无法调整 react-chartjs-2 圆环图的大小

Question

我正在尝试用 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];
            }
                        }
                    } 
                }}
                />


        )

}

Answer 1

查看responsive下的chartjs 文档。

在选项中，设置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

Answer 2

 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'));

Answer 3

这个答案与上面两个答案相同，除了渲染中的一个额外的 div，见下文

render() {
    return (
     <div style={{width: '10%', height: '10%'}}>
      <Doughnut
        data={this.state.data}
        options={{
          responsive: true,
          maintainAspectRatio: true,
        }}
      />
     </div>
    )
  }

由于我们将maintainAspectRatio设置为true ，我们不能将高度、宽度设置为图形本身，而是可以将高度、宽度设置为其父 div ，这样我们就可以轻松地修改尺寸。

快乐的编码...