javascript - Chartjs 嵌套不同厚度的 donut 层

Question

如何创建具有不同厚度层的嵌套 donut ？ Chartjs 只允许在 options 属性中定义 cutoutPercentage 并且所有层都由该值更改。我想要一个具有不同厚度层的嵌套 donut 。例如，在这个图表中，我想制作不同厚度的红色和蓝色图层。

var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
  type: 'doughnut',
  options: {
    cutoutPercentage: 75
  },
  data: {
    datasets: [{
        backgroundColor: [
          "red"
        ],
        data: [1]
      },
      {
        backgroundColor: [
          "blue"
        ],
        data: [1]
      }
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

<canvas id="chart"></canvas>

Answer 1

我找到了解决方案，方法是将两个圆环图叠加在一起。通过这种方式，我能够设置不同的 cutoutPercentage 值。在此示例中，红色和蓝色图层具有不同的厚度。

var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
  type: 'doughnut',
  options: {
    cutoutPercentage: 20
  },
  data: {
    datasets: [{
      backgroundColor: [
        "red"
      ],
      data: [1]
    }]
  }
});
var ctx2 = document.getElementById("chart2");
var chart2 = new Chart(ctx2, {
  type: 'doughnut',
  options: {
    cutoutPercentage: 90
  },
  data: {
    datasets: [{
      backgroundColor: [
        "blue"
      ],
      data: [1]
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

<div class="container" style="position:relative;  ">
  <canvas id="chart" style="position:absolute;"></canvas>
  <canvas id="chart2" style="position:absolute;"></canvas>
</div>