图表js中的饼图之间的填充 [英] Padding Between Pie Charts in chart js

问题描述

我正在一个使用chart.js进行工作的项目中，我需要知道是否有办法在饼图的数据集之间添加一些空间.

I am working on a project using chart.js for work and I need to know if there is a way to add some space between datasets of a pie chart.

到目前为止，我的工作在下面的图表中，我希望在内部数据集和外部数据集之间有一些填充.

What I have so far is in the chart depicted below, and I want there to be some padding between the inner and outer datasets.

我尝试将其中一张图表设置为 nutnut 类型或在内部图表上添加较粗的外部边框，而我都不需要这些.

I have tried setting one of the charts to a doughnut type or adding a thicker outer border on the inner chart, and neither of those are what I needed.

推荐答案

通过在两个现有数据集之间添加一个空数据集并定义一个

You can obtain the desired result by adding an empty dataset between the two existing ones and defining a weight property on the empty and the inner dataset.

const colors = ["#FF6384", "#36A2EB", "#FFCE56"];
var pieChart = new Chart("myChart", {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{      
      data: [8, 5, 6],
      backgroundColor: colors,
    }, 
    { 
      weight: 0.2
    },
    { 
      data: [5, 7, 4],
      backgroundColor: colors,
      weight: 1.2
    }]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

这篇关于图表js中的饼图之间的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！