Chart.js linie accidentată (Programare, Javascript, Canvas, Chart.Js, Linechart)

Emphram Stavanger a intrebat.

Am un Chart.js diagramă cu linii, și un set de date în care fiecare punct de date crește cu 0.1. Prin urmare, m-aș aștepta la o linie perfect dreaptă.

var options = {
    type: 'line',
    data: {
        labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60],
        datasets: [{
            label: 'Amount of stuff',
            data: [10, 10.1, 10.2, 10.3, 10.4, 10.5, 10.6, 10.7, 10.8, 10.9, 11, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8, 11.9, 12, 12.1, 12.2, 12.3, 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13, 13.1, 13.2, 13.3, 13.4, 13.5, 13.6, 13.7, 13.8, 13.9, 14, 14.1, 14.2, 14.3, 14.4, 14.5, 14.6, 14.7, 14.8, 14.9, 15, 15.1, 15.2, 15.3, 15.4, 15.5, 15.6, 15.7, 15.8, 15.9, 16, 16.1, 16.2, 16.3, 16.4, 16.5, 16.6, 16.7, 16.8, 16.9, 17, 17.1, 17.2, 17.3, 17.4, 17.5, 17.6, 17.7, 17.8, 17.9, 18, 18.1, 18.2, 18.3, 18.4, 18.5, 18.6, 18.7, 18.8, 18.9, 19],
            borderWidth: 4,
            borderColor: '#333'
        }]
    },
    // options: ... (see JSFiddle below)
};

Cu toate acestea, în browser (Chrome edge, 15″ Retina Macbook), obțin o linie destul de accidentată / oscilantă:

Am încercat să mă joc cu diferite tension setări, dar, deși pare să facă o mică diferență, nu elimină problema. Cantitatea de oscilație pare să depindă, de asemenea, de lățimea graficului.

Care este cauza acestei probleme? Există o modalitate de a face linia mai puțin zimțată?

JSFiddle pentru a demonstra

1 răspunsuri
Oleksandr Pyrohov

Este o bug care a fost rezolvat la 14 noiembrie 2017.

În prezent, ultima Chart.js versiune este 2.7.1, dar această corecție va face parte din versiunea 2.8 versiune, conform informațiilor de pe GitHub. S-ar putea să doriți să așteptați următoarea versiune în care această problemă va fi rezolvată sau să încercați să implementați singur o soluție de remediere la cald, dacă este critică pentru aplicația dvs.