Question

我正在尝试使用react和gatsbyjs制作一个甜甜圈图。图表工作正常，但我无法使用div的整个宽度。对于保留的区域，它显示得太小了。

layout-sw320dp/layout_a.xml(for phone)

Answer 1

在响应下的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

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

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

2 个答案: