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

Question

I've got a Piechart with two different Datasets:

How I can make internal pie chart bigger (or external thinner)? Is there any option how I can adjust it?

Here is my code:

 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> 

I've tried to combine different pie charts: link , but it doesn't work.

Answer 1

From the styling section of the pie chart documentation of the chart.js library available here , you will see that there is a weight property. This property is used exactly for making the circles bigger/smaller.

Basically, by playing with the weight of the two data sets you can adjust the sizes of the circles. In the code below, I set the weight of the first dataset to 1 and for the second dataset to 4 .

By running the snippet you will see the desired output.

Full code sample

 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> 

Answer 2

您是否尝试过在options { }使用cutoutPercentage进行试验？