Question

甜甜圈图的宽度没有减小..如何减小它

       graphData :{

            datasets:[
              {
             label : 'Customer Expense Analysis',
             data : [50,20],
             backgroundColor: [' #ffeb00','#a2a2a2'],
             hoverBackgroundColor:['#ffeb00','#a2a2a2'],
             labels: ["Free Parking Slot", "Total Parking Slot"],
             borderColor:'#363A42',
             boredrAlign: 'center',
             borderWidth: 1,
             cutoutPercentage:0                
              }
            ]
          },

             <Doughnut
              data= {this.state.graphData}
               options={{
                title: {
                display: this.props.displayTitle,
                fontSize: 40
                 },
                maintainAspectRatio: true,
                legend: {
                display: true,
                position: "left",
                  }
                }}
                />

边界宽度增加，但是图形宽度中两个数据之间的距离增加了怎么办？

Answer 1

您需要像这样<Doughnut data={data} width={600} />

这是一个代码：

import React from "react";
import { Line, Doughnut } from "react-chartjs-2";

const data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "My First dataset",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "rgba(75,192,192,1)",
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "rgba(75,192,192,1)",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(75,192,192,1)",
      pointHoverBorderColor: "rgba(220,220,220,1)",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40]
    }
  ]
};

export default class Hello extends React.Component {
  render() {
    return (
      <div>
        <h2>Line Example</h2>
        <Doughnut data={data} width={600} />
      </div>
    );
  }
}

在codesandbox上运行代码

让我知道它是否有效。

此外，如果您想要响应式图表。这是该指南：

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

响应图的

Source。正在运行响应式code。

Answer 2

在添加甜甜圈图“ cutoutPercentage：80”时，我们可以减小宽度并减小边框宽度“ borderWidth：0”

          graphData :{

            datasets:[
              {
                label : 'Customer Expense Analysis',
                data : [50,40],
                backgroundColor: [' #ffeb00','#a2a2a2'],
                hoverBackgroundColor:['#ffeb00','#a2a2a2'],
                labels: ["Free Parking Slot", "Total Parking Slot"],
                borderColor:'#363A42',
                boredrAlign: 'center',
                borderWidth: 0,
                outerRadius:'100%',
                innerRadius: "99%",
                cornerRadius:'7%',
                padAngle:'10'
              }
            ]
          },
                                  <Doughnut
                                      data={this.state.fourthgraph}
                                      options={{
                                      title: {
                                    display: this.props.displayTitle,
                                      fontSize: 10
                                      },
                                     maintainAspectRatio: true,
                                     legend: {
                                     display: true,
                                     position: "left",
                                     backgroundColor:red
                                      },
                                      cutoutPercentage: 80
                                     }}
                                    />

在reactjs甜甜圈图中，如何减小图表的宽度

2 个答案: