问题描述

我正在尝试用 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 圆环图的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！