javascript - Chartjs 嵌套饼图/ donut chart

Question

Chart.js制作了一些非常棒的图表，直到现在它对我来说一直很好用。我想创建这样的东西:

这可能吗？

Answer 1

我认为，从 Chart.js 的 2.0 版开始，这是可能的。这是一个例子:

var ctx = document.getElementById("myChart");
var chartData = {
  labels: [
    "Red",
    "Blue",
    "Yellow"
  ],
  datasets: [{
    data: [300, 50, 100],
    backgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ],
    hoverBackgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ]
  }, {
    data: [200, 100, 25, 25, 66, 34],
    backgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56",
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ],
    hoverBackgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56",
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ]
  }]
};
var pieChart = new Chart(ctx, {
  type: 'pie',
  data: chartData
})

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

<canvas id="myChart" width="300" height="300"></canvas>