J'utilise Chart.JS pour tracer un jeu de données,
Cependant, j'ai un effet lisse!
Voici la courbe que j'ai:
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
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,
}
]
};
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
}]
}
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
}
]
};