Chart.js: linie proste zamiast krzywych

Question

Używam Chart.JS do wykreślenia zestawu danych,

Jednak uzyskałem gładki efekt!

Oto krzywa mam:

Oto mój kod:

function plotChart(data, labels) { 

    var lineChartData = { 
     "datasets": [{ 
      "data": data, 
      "pointStrokeColor": "#fff", 
      "fillColor": "rgba(220,220,220,0.5)", 
      "pointColor": "rgba(220,220,220,1)", 
      "strokeColor": "rgba(220,220,220,1)" 
     }], 
     "labels": labels 
    }; 

    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData); 

} 

Jak mogę mieć proste linie zamiast krzywych?

Dziękuję

Answer 1

Według documentation on chartjs.org

można ustawić „Krzywa Béziera” w opcjach i przekazać ją podczas tworzenia wykresu.

bezierCurve: false 

np

var options = { 
    //Boolean - Whether the line is curved between points 
    bezierCurve : false 
}; 
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData, options); 

Aktualizacja dla wersji 2

Według zaktualizowanej dokumentacji do konfiguracji linii w opcji globalnych

Name  Type Default Description 
tension  Number 0.4  Default bezier curve tension. Set to 0 for no bezier curves. 

np

var options = { 
    elements: { 
     line: { 
      tension: 0 
     } 
    } 
}; 

A także bezpośrednio w strukturze zestawu danych, ustawiając lineTension na 0 (zero).

Property  Type Usage 
lineTension  Number Bezier curve tension of the line. Set to 0 to draw straightlines. 
         This option is ignored if monotone cubic interpolation is used. 
         Note This was renamed from 'tension' but the old name still works. 

Przykładowy obiekt danych wykorzystujący te atrybuty pokazano poniżej.

var lineChartData = { 
    labels: labels, 
    datasets: [ 
     { 
      label: "My First dataset", 
      lineTension: 0,   
      data: data, 
     } 
    ] 
}; 

Answer 2

Możesz użyć opcji lineTension, aby ustawić żądaną krzywą. Ustaw 0 dla linii prostych. Możesz podać liczbę pomiędzy 0-1

data: { 
    datasets: [{ 
     lineTension: 0 
    }] 
}