Chartjs 嵌套饼图/甜甜圈图

2022-01-22 00:00:00 javascript chart.js

Chart.js 制作了一些很棒的图表，到目前为止它对我来说一直很好用.我想创建这样的东西:

Chart.js makes some awesome looking charts and it's been working really well for me up until now. I'm wanting to create something like this:

有可能吗?

推荐答案

我认为这在 Chart.js 2.0 版本中是可能的.这是一个例子:

This is possible as of version 2.0 of Chart.js, I think. Here's an example:

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>

相关文章