时间戳

首页 > 解决方案 > Chart.js 混合图表中不同的甜甜圈厚度

chart.js - Chart.js 混合图表中不同的甜甜圈厚度

问题描述

所以我一直在尝试重新创建下图中的图表：

在此处输入图像描述

我正在使用该cutoutPercentage属性，但它会影响两个甜甜圈，就我而言，我只想更改外圈的厚度。

这就是我现在所拥有的：

在此处输入图像描述

标签： chart.js

解决方案

您可以weight在单个数据集上定义选项以获得所需的结果。

weight：数据集的相对厚度。提供权重值将导致绘制饼图或甜甜圈数据集的厚度相对于所有数据集权重值的总和。

请看下面的可运行代码片段，看看它是如何工作的。

var pieChart = new Chart("myChart", {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{
      data: [300, 50, 100],
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
      weight: 0.2
    }, {
      data: [200, 100, 25],
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
    }]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

推荐阅读