Невозможно изменить размер диаграммы пончиков реакции-чарджис-2 - PullRequest
Новая
       53

Невозможно изменить размер диаграммы пончиков реакции-чарджис-2

0 голосов
/ 20 декабря 2018

Я пытаюсь сделать кольцевую диаграмму с реакцией и 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];
            }
                        }
                    } 
                }}
                />


        )

}

1 Ответ

0 голосов
/ 21 декабря 2018

Просмотрите документы 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

...