Chart.js : 如何调整饼图半径？

Question

我有一个包含两个不同数据集的饼图：

如何使内部饼图变大（或使外部饼图变薄）？有什么选项可以调整吗？

这是我的代码：

var ctx = $('#open_chart');
var chart = new Chart(ctx, {
  type: 'pie',
  data: {
    datasets: [{
      data: [1, 5],
      backgroundColor: ['red', 'blue'],
    }],
    labels: ['Minor', 'Other'],
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Title',
      position: 'bottom',
      fontSize: 15,
      fontColor: '#000000'
    },
    events: ['mousemove'], // cursor: pointer on hover
    onHover: function (event, chartElement) {
      event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
    },
    legend: {
      display: false
    }
  },
});



var newDataset = {
  data: [1, 3],
  backgroundColor: ['red', 'blue'],
};

var config = {
  type: 'pie',
  data: {
    datasets: [{
      data: [1, 3],
      backgroundColor: ['red', 'blue'],
    }],
    labels: ['Red', 'Blue']
  },
  options: {
    responsive: true
  }
};

chart.data.datasets.push(newDataset);
chart.update();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="chart-container" style="position: relative; height:500px; width:300px">
      <canvas id="open_chart" style="position:absolute;top:150px;" width="200" height="200"></canvas>
</div>

我试过组合不同的饼图：link，但它不起作用。

Answer 1

您是否尝试过 options { } 中的 cutoutPercentage？

Answer 2

从可用的 chart.js 库 here 的饼图文档的样式部分，您会看到有一个 weight 属性。这个属性正好用来制作圆 bigger/smaller.

基本上，通过调整两个数据集的权重，您可以调整圆圈的大小。在下面的代码中，我将第一个数据集的权重设置为 1，将第二个数据集的权重设置为 4.

通过运行代码片段，您将看到所需的输出。

完整代码示例

var ctx = $('#open_chart');
var chart = new Chart(ctx, {
  type: 'pie',
  data: {
    datasets: [{
      data: [1, 5],
      backgroundColor: ['red', 'blue'],
      weight: 1
    }],
    labels: ['Minor', 'Other']
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Title',
      position: 'bottom',
      fontSize: 15,
      fontColor: '#000000'
    },
    events: ['mousemove'], // cursor: pointer on hover
    onHover: function (event, chartElement) {
      event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
    },
    legend: {
      display: false
    },
  },
});



var newDataset = {
  data: [1, 3],
  backgroundColor: ['red', 'blue'],
  weight: 4
};

var config = {
  type: 'pie',
  data: {
    datasets: [{
      data: [1, 3],
      backgroundColor: ['red', 'blue'],
    }],
    labels: ['Red', 'Blue']
  },
  options: {
    responsive: true
  }
};

chart.data.datasets.push(newDataset);
chart.update();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="chart-container" style="position: relative; height:500px; width:300px">
      <canvas id="open_chart" style="position:absolute;top:150px;" width="200" height="200"></canvas>
</div>

Chart.js : 如何调整饼图半径？

Chart.js : how I can adjust Pie chart radius?

javascript

charts

pie-chart

chart.js