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

kxkpmulp 于 2022-11-07 发布在 Chart.js

关注(0)|答案(3)|浏览(205)

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

        )

}

chart.js

来源：https://stackoverflow.com/questions/53872165/cant-resize-react-chartjs-2-doughnut-chart

3条答案

按热度按时间

b1payxdu1#

请查看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

赞(0）回复(0）举报 2022-11-07

dojqjjoe2#

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

赞(0）回复(0）举报 2022-11-07

7ivaypg93#

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

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

由于我们将maintainAspectRatio设置为true，因此我们无法将高度和宽度设置为图形本身，而是可以将高度和宽度设置为其父div，这样我们就可以轻松地修改尺寸。
快乐编码...

赞(0）回复(0）举报 2022-11-07

我来回答

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

3条答案

相关问题

热门标签

最新问答