Pie chart

Я имею дело с графиком, который имеет нежелательные интервалы слева и справа. Я пытался удалить его без удачи, и я не знаю, что еще делать сейчас. Я внимательно прочитал документацию, но не могу найти решение. Возможно ли это сделать? Дайте мне знать, если потребуется дополнительная информация, и я предоставлю ее.

Редактировать:

<div>
<canvas id="chart-gender"></canvas>  
</div>


<script>
var gender_data = [10, 35];

var graph_gender_preset = {
    labels: ["Female", "Male"],
    datasets: [
        {
            data: gender_data,
            backgroundColor: ["#0fa0e3", "#ff3549"]
        }
    ]
};

var ctx3 = $("#chart-gender");

var chart_gender = new Chart(ctx3, {
type: 'doughnut',
data: graph_gender_preset,
options: {
        responsive: true,
        title: {
            display: false,
            position: "top",
            fontStyle: "bold",
            fontSize: 0,
            fullWidth: false,
            padding: 0
        },
        legend: {
            display: false,
            position: "top",
            fullWidth: false,
            labels: { display: false, usePointStyle: true, fontSize: 15, fontStyle: "bold" }

        }
    }
});
</script>
26
Pelle 9 Янв 2017 в 14:26

4 ответа

Лучший ответ

Проблема не в пончике, а в холсте, в котором он используется.

Пончик должен использовать квадратную коробку, иначе он будет выглядеть как многоточие. Поэтому, если вы измените размер холста и сделаете его квадратичным, у вас больше не будет границ.

Вот пример JS Fiddle.

<table border="1">
  <tr>
    <td>
      First
    </td>
    <td>
      <canvas width="100%" height="100%" id="myChart"></canvas>
    </td>
    <td>
      Third
    </td>
  </tr>
</table>
14
Oliver 12 Янв 2017 в 10:25

Я думаю, что для response необходимо установить значение false, тогда свойства высоты и ширины будут работать так:

const options= {
 responsive: false
} 
<div>
  <canvas id="chart-gender" width="300" options={options} height="300"></canvas>  
</div>
0
Patrick Ward 22 Окт 2019 в 17:58

После тонны исследований я обнаружил, что установка ширины и высоты удалит это пространство.

<div>
<canvas id="chart-gender" width="300" height="300"></canvas>  
</div>
3
Vinay Murakonda 15 Июл 2019 в 19:21

У меня недавно была такая же проблема. Мое решение состояло в том, чтобы изменить соотношение сторон диаграммы с

options: { aspectRatio: 1 }

Согласно документам здесь по умолчанию установлено значение 2. Если вы измените его на 1, холст диаграммы будет квадратным, и вокруг вашего пончика / пирога не будет пробелов.

Надеюсь, это поможет кому-то!

0
user2993689 3 Апр 2020 в 12:07