Chart.js: Gerade statt Kurven

Ich verwende Chart.JS, um einen Datensatz zu zeichnen.

Ich habe jedoch einen sanften Effekt!

Hier ist die Kurve, die ich habe:

Hier ist mein Code:

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);

}

Wie kann ich gerade Linien anstelle von Kurven haben?

Danke dir

Lösung für Version 1 (alte Kartenversion)

Laut Dokumentation auf chartjs.org

Sie können die 'bezierCurve' in Optionen festlegen und beim Erstellen des Diagramms übergeben.

bezierCurve: false

z.B:

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

Update für Version 2

Gemäß aktualisierter Dokumentation zur Leitungskonfiguration in globalen Optionen

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

z.B:

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

Und auch direkt in der Datensatzstruktur durch Setzen lineTensionauf 0 (Null).

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.

Ein Beispiel für ein Datenobjekt mit diesen Attributen ist unten dargestellt.

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

Mit der Option lineTension können Sie die gewünschte Kurve einstellen. Setzen Sie 0 für gerade Linien. Sie können eine Zahl zwischen 0-1 angeben

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

Ich habe lineTension verwendet, um die Glätte der Kurve einzustellen.

Aus den Dokumenten : lineTension erhält eine Zahl, Bezier-Kurvenspannung der Linie. Auf 0 setzen, um gerade Linien zu zeichnen. Diese Option wird ignoriert, wenn eine monotone kubische Interpolation verwendet wird.

Stellen Sie einfach sicher, dass Sie mit unterschiedlichen Werten testen, wie glatt die Linie sein soll.

Beispielsweise:

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

  ]
};

Ich denke, es wurde aktualisiert lineTension. Überprüfen Sie die Dokumente .