web-dev-qa-db-fra.com

Chart.js: lignes droites au lieu de courbes

J'utilise Chart.JS pour tracer un jeu de données,

Cependant, j'ai un effet lisse!

Voici la courbe que j'ai:

enter image description here

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

}

Comment puis-je avoir des lignes droites au lieu de courbes?

Je vous remercie

chart.js
79
taboubim

Selon documentation sur chartjs.org

vous pouvez définir le 'bezierCurve' dans les options et le transmettre lorsque vous créez le graphique.

bezierCurve: false

par exemple:

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

Mise à jour pour la version 2

Selon la documentation mise à jour pour la configuration de ligne dans les options globales

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

par exemple:

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

Et aussi directement dans la structure du jeu de données en définissant lineTension sur 0 (zéro).

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.

Un exemple d'objet de données utilisant ces attributs est présenté ci-dessous.

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

Vous pouvez utiliser l'option lineTension pour définir la courbe souhaitée. Définissez 0 pour les lignes droites. Vous pouvez donner un nombre compris entre 0 et 1

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

J'ai utilisé lineTension pour définir la régularité de la courbe.

Du docs : lineTension reçoit un nombre, tension de courbe de Bézier de la ligne. Définissez la valeur sur 0 pour tracer des lignes droites. Cette option est ignorée si une interpolation cubique monotone est utilisée.

Assurez-vous simplement de tester avec différentes valeurs le degré de fluidité de la ligne.

Par exemple:

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

  ]
};
2
Kenny Alvizuris