Chart.js: linie proste zamiast krzywych

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

Jednak uzyskałem gładki efekt!

Oto krzywa, którą 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ę Ci

Rozwiązanie dla wersji 1 (stara wersja wykresów)

Zgodnie z dokumentacją na chartjs.org

możesz ustawić 'bezierCurve' w opcjach i przekazać ją podczas tworzenia wykresu.

bezierCurve: false

na przykład:

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 do wersji 2

Zgodnie z zaktualizowaną dokumentacją konfiguracji linii w opcjach globalnych

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

na przykład:

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

A także bezpośrednio w strukturze zbioru danych, ustawiając lineTensionna 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 korzystający z tych atrybutów pokazano poniżej.

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

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

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

Użyłem lineTension, aby ustawić gładkość krzywej.

Z dokumentów : lineTension otrzymuje liczbę, napięcie krzywej Beziera linii. Ustaw na 0, aby rysować proste linie. Ta opcja jest ignorowana, jeśli używana jest monotoniczna interpolacja sześcienna.

Po prostu sprawdź przy różnych wartościach, jak gładka ma być linia.

Na przykład:

var data = {
  labels: ["Jan", "Feb", "Mar"],
  datasets: [{
      label: "Label 1",
      lineTension: 0.2
    }, {
      label: "Stock B",
      lineTension: 0.2
    }

  ]
};

Myślę, że został zaktualizowany do lineTension. Sprawdź dokumenty .