我的饼图数据之一的宽度增加或减少以及数据角度存在问题

Question

我使用chart.js制作了两个饼图。两张图都有两个数据。我在增加或减少饼图数据之一的宽度时遇到问题。另外我想改变 30% 和 70% 的角度作为我的设计。我也想改变角度作为我的设计，我不知道是否可以用图表js来做到这一点。这是电流输出 -

我想要的输出 -

// Donut Graph
// Get the canvas element
var canvas = document.getElementById('donutGraph');

// Create the donut chart
var donutChart = new Chart(canvas, {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [70, 30],
      backgroundColor: ['#E1EFFE', '#1C64F2'],
      borderWidth: 0
    }]
  },
  options: {
    responsive: true, // Enable responsiveness
    maintainAspectRatio: false,
    cutout: '40%', // Creates a donut chart
    legend: {
      display: false
    },
    plugins: {
      datalabels: {
        display: true,
        color: '#fff',
        formatter: (value, ctx) => {
          let sum = ctx.dataset.data.reduce((a, b) => a + b, 0);
          let percentage = (value * 100 / sum).toFixed(0);
          return percentage + "%";
        }
      }
    }
  }
});




// Donut Graph Two
// Get the canvas element
var canvastwo = document.getElementById('donutGraphtwo');

// Create the donut chart
var donutCharttwo = new Chart(canvastwo, {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [70, 30],
      backgroundColor: ['#0E9F6E', '#DEF7EC'],
      borderWidth: 0
    }]
  },
  options: {
    responsive: true, // Enable responsiveness
    maintainAspectRatio: false,
    cutout: '40%', // Creates a donut chart
    legend: {
      display: false
    },
    plugins: {
      datalabels: {
        display: true,
        color: '#fff',
        formatter: (value, ctx) => {
          let sum = ctx.dataset.data.reduce((a, b) => a + b, 0);
          let percentage = (value * 100 / sum).toFixed(0);
          return percentage + "%";
        }
      }
    }
  }
});

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.graph-two {
  max-width: 498px;
  background-color: #fff;
  border: 1px solid #E5E7EB;
  padding: 24px;
  border-radius: var(--16, 16px);
}

.donut-main {
  padding: 10px;
}


/* Donut Head */

.overall_text {
  position: absolute;
  top: 92px;
  left: 82px;
  text-align: center;
  font-family: Inter;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  /* 36px */
  letter-spacing: -0.24px;
}

.graph-two h3 {
  color: #000;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

.donut-result {
  display: flex;
  align-items: center;
}

.donut-result span:first-child {
  display: inline-block;
  width: var(--4, 16px);
  height: var(--4, 16px);
  border-radius: 999px;
  background-color: #1C64F2;
  margin-right: 8px;
}

.donut-result span:nth-child(2) {
  color: #31374A;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  margin-right: 8px;
}

.donut-result span:last-child {
  color: #000;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="graph-two">
  <div class="row">
    <div class="col-lg-6 ">
      <h3>Listings Limit</h3>
      <div class="donut-main position-relative">
        <div style="max-width: 100%; overflow: auto;">
          <canvas id="donutGraph" style="max-width: 100%;"></canvas>
        </div>
        <div class="overall_text">30%</div>
      </div>
      <div class="donut-result mt-3 mb-3">
        <span></span>
        <span>Your Listings</span>
        <span>2929</span>
      </div>
      <div class="donut-result">
        <span style="background-color: #E1EFFE;"></span>
        <span>Max Listings</span>
        <span>10,000</span>
      </div>
    </div>

    <div class="col-lg-6 ">
      <h3>Gross Revenue</h3>
      <div class="donut-main position-relative">
        <div style="max-width: 100%; overflow: auto;">
          <canvas id="donutGraphtwo" style="max-width: 100%;"></canvas>
        </div>
        <div class="overall_text">70%</div>
      </div>
      <div class="donut-result mt-3 mb-3">
        <span style="background-color: #0E9F6E;"></span>
        <span>Your Revenue</span>
        <span>$350</span>
      </div>
      <div class="donut-result">
        <span style="background-color: #DEF7EC;"></span>
        <span>Max Revenue</span>
        <span>$999,999</span>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>