ChartJS - 具有多个环的甜甜圈图表

Question

是否可以使用 ChartJS 创建具有多个环的圆环图，如下所示？

Answer 1

您可以在fiddle link

找到解决方案

var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, config);
var config = {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [
               10,20,30
                ],
                backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C"
            ],
        }, {
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()

            ],
                backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C"
            ],
        }],
        labels: [
            "Red",
            "Green",
            "Yellow"
        ]
    },
    options: {
        responsive: true
    }
};

Answer 2

您需要将多个数据集添加到图表中。它们将根据您的需要显示。请查看他们自己的饼图sample。您可以下载并在本地打开它作为示例。他们有多个数据集，使图表看起来像您需要的那样。

希望有帮助。

Answer 3

我知道这是一个老问题，但昨天又陷入了同样的困境，到目前为止，我接触到的最好的是 Chart js，这是一个 插件，它确实做到了这一点（甚至更多！）

Answer 4

在“数据”字段中，我们通过添加“数据集”数组元素来添加更多图表。

data: {
  labels: [], // Label of Legends and Slices on Doughnut Chart.
  datasets: [
    {
      data: [], // Doughnut Chart data.
      backgroundColor: [], // Color of Slices on Doughnut Chart.
      ...
    }
  ]
};

Chart.register(ChartDataLabels);

// Write Javascript code!
var ctx = document.getElementById('myChart');
var data = {
  // labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
  datasets: [
    {
      data: [20, 20, 50, 70, 80],
      backgroundColor: ['#FFC300', '#F72585', '#4CC9F0', '#5ED400', '#4D09E8'],
    },
    {
      data: [90, 30, 60, 40, 20],
      backgroundColor: ['#FFC300', '#F72585', '#4CC9F0', '#5ED400', '#4D09E8'],
    },
  ],
};

var options = {
  responsive: true,
  plugins: {
    datalabels: {
      color: 'white',
      font: {
        weight: 'bold',
      },
    },
  },
};

var myDoughnutChart = new Chart(ctx, {
  type: 'doughnut',
  data,
  options,
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="myChart" width="400" height="400"></canvas>

在 ChartJS 中使用按钮添加和删除环的示例。