Question

如何创建具有不同厚度层的嵌套甜甜圈？ Chartjs只允许在options属性中定义cutoutPercentage，并且所有图层都可以通过该值进行更改。我想要一个嵌套的甜甜圈，它的层厚度不同。例如，在此图表中，我要制作具有不同厚度的红色和蓝色图层。

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>

Chartjs嵌套的具有不同厚度的甜甜圈层

1 个答案: