Chart.js padding canvas

Question

Я использую последнюю библиотеку chart.js для создания линейной диаграммы без весов, но есть проблема с заполнением, а верхняя и нижняя точки обрезаны. Я не мог видеть какой-либо вариант для заполнения холста.

Мой конфиг как ниже.

var config = { 
    type: 'line', 
    data: { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [{ 
      label: "Sales", 
      data: [10, 20, 50, 25, 60, 12, 48], 
      fill: true, 
      lineTension: 0.25, 
      borderColor: "#558aeb", 
      backgroundColor: "#558aeb" 
     }] 
    }, 
    options: { 
     responsive: true, 
     legend: { 
      display: false 
     }, 
     tooltips: { 
      mode: 'label' 
     }, 
     hover: { 
      mode: 'dataset' 
     }, 
     scales: { 
      xAxes: [{ 
       display: false 
      }], 
      yAxes: [{ 
       display: false 
      }] 
     } 
    } 
}; 

Answer 1

Я считаю, что ваша проблема не дополняется, но я могу ошибаться. Как я вижу, ваша проблема заключается в автоматическом обнаружении высоты области рисования, когда максимальное число в ваших данных хорошее и круглое, например 60. Попытайтесь выяснить, сохраняется ли проблема, когда максимальное число равно 61, 62 и т. Д. Поэтому я предлагаю вам готовить ваши данные, чтобы таких проблем не возникало. Если сбор данных не является параметром, попробуйте явно определить максимальный тик по оси Y, так что он будет чуть больше максимального числа в данных. В вашем случае, попробуйте использовать это:

yAxes: [{ 
    display: false, 
    ticks: { 
     max: 62 
    } 
}] 

Так что вам нужно будет рассчитать максимальное число в данных и добавить что-то маленькое, чтобы явно определить максимальную клещу, который будет избавиться от неожиданного кадрирования. У кого-то может быть лучшее понимание и решение, но это вариант, о котором я могу думать. Это и приготовление ваших данных, конечно.

Answer 2

Я был исследован как сделать исправление, чтобы решить это. Я видел три странного поведения:

1- разрывов данных, если есть тяжелые изменения, например:

[0, 10, 70, 30, 20, 12, 50, 200, 200, 200, 200, 200] 

2- «ошибка» всегда половина высоты нашего BorderWidth.

3- Этой ошибки может был введен, когда мы изменили линию 36 core.layoutService.js на следующем COMMIT

На втором месте я увидел две странных отступы ВАРА внутри функции «обновления» ядра. layoutService:

Вокруг линии 29 у нас есть функция, а на линиях 35 и 36 у нас есть странные вары.

// The most important function 
     update: function(chartInstance, width, height) { 
      if (!chartInstance) { 
       return; 
      } 

      var xPadding = 0; 
      var yPadding = 0; 

Я видел, что делает функция с этими варами, особенно с yPadding. Я не мог использовать какой-либо полезный калькулятор, сделанный с помощью yPadding. На мой взгляд, это проблема. Мы всегда поддерживаем yPadding равным 0 и IMHO, это была ошибка, применяемая в другой версии этого файла ЗДЕСЬ.

Решение следующее, и я разработал это, потому что спрос за разработчиком этой фиксации удалил строку.

это HOTFIX, я буду делать PR И ЕСЛИ ЭТО ПРИНЯТО БУДЕТ Решение

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

Config проп пример:

padding: { 
    x: 5, 
    y: 4 
}, 

У вас есть код и все объяснения здесь: https://github.com/chartjs/Chart.js/pull/3349

Answer 3

Если я понял вопрос правильно, текущая версия (> 2.4) Chart JS поддерживает обивка конфигурации вариант вокруг схемы диаграммы.

layout: { 
    padding: { 
     // Any unspecified dimensions are assumed to be 0      
     top: 25 
    } 
} 

Check here