时间戳

首页 > 解决方案 > 在reactjs甜甜圈图中，如何减小图表的宽度

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

问题描述

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

       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",
                  }
                }}
                />

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

标签： reactjschart.jspie-chart

解决方案

你需要像这样传递宽度<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>
    );
  }
}

在代码沙盒上运行代码

让我知道它是否有效。

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

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

响应图表的来源。运行响应式代码。

推荐阅读