Podkładka na płótnie Chart.js

Question

Używam najnowszej biblioteki chart.js do generowania wykresu liniowego bez podziałek, ale występuje problem z dopełnieniem, a górny i dolny punkt są odcinane. Nie widziałem żadnej opcji dla dopełnienia kanwy.

Mój config jest jak poniżej.

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

Wierzę, że twój problem nie jest wypełnieniem, ale mogę się mylić. Jak widzę, twoim problemem jest automatyczne wykrywanie wysokości obszaru do rysowania, gdy maksymalna liczba danych jest dobra i okrągła, jak na przykład 60. Spróbuj sprawdzić, czy problem utrzymuje się, gdy maksymalna liczba to 61, 62 itd. Sugeruję więc, abyś gotował swoje dane, aby nie pojawiały się takie problemy. Jeśli gotowanie danych nie jest opcją, spróbuj jednoznacznie zdefiniować maksymalne zaznaczenie na osi Y, tak aby było nieco powyżej maksymalnej liczby w danych. W twoim przypadku, spróbuj tego:

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

Więc trzeba będzie obliczyć maksymalną liczbę w danych i dodać coś małego, aby jednoznacznie określić maksymalną kleszcza, który będzie pozbyć się nieoczekiwane kadrowanie. Ktoś może mieć lepsze zrozumienie i rozwiązanie, ale jest to opcja, którą mogę wymyślić. To i gotowanie twoich danych, oczywiście.

Answer 2

Zostałem zbadany, jak zrobić poprawkę, aby to rozwiązać. Widziałem trzy dziwnych zachowań:

1- przerw danych, jeśli masz ciężkie zmiany, na przykład:

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

2- Error 'jest zawsze w połowie wysokości naszego borderWidth.

3- Błąd ten może został wprowadzony, kiedy zmienił linię 36 core.layoutService.js na następny COMMIT

Na drugim miejscu widziałem dwa dziwne wypełniające vars wewnątrz funkcji „aktualizacji” rdzenia. layoutService:

Wokół linii 29 mamy funkcję, a na liniach 35 i 36 mamy dziwne vary.

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

      var xPadding = 0; 
      var yPadding = 0; 

Widziałem, jak funkcja działa z tymi varsami, szczególnie z yPadding. Nie mogłem wykonać żadnej użytecznej kalkulacji przy pomocy yPadding. Moim zdaniem tutaj jest problem. Zawsze utrzymujemy yPadding na 0 i IMHO, to był błąd zastosowany w innej wersji tego pliku TUTAJ.

Rozwiązanie jest następujące i opracowałem to, ponieważ żądanie dewelopera tego zobowiązania usunęło linię.

że to poprawkę, uczynię PR i jeśli jest to zatwierdziły będzie rozwiązanie

przypadku zastosowania tego kodu będzie można ustawić swoje dopełnienie w stylach config wykresu, również, jeśli nie stosuj żadnej konfiguracji, którą przyjmie domyślnie na podstawie wysokości wykresu.

Config prop przykład:

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

masz kod i wszystkie wyjaśnienia tutaj: https://github.com/chartjs/Chart.js/pull/3349

Answer 3

Jeśli zrozumiałem pytanie poprawna, aktualna wersja (> 2.4) Chart JS obsługuje dopełnienie config opcja wokół układu wykresu.

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

Check here