Chart.js: líneas rectas en lugar de curvas

111

Estoy usando Chart.JS para trazar un conjunto de datos,

¡Sin embargo, obtuve un efecto suave!

Aquí está la curva que tengo:

ingrese la descripción de la imagen aquí

Aquí está mi código:

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

}

¿Cómo puedo tener líneas rectas en lugar de curvas?

Gracias

Mohamed Taboubi
fuente

Respuestas:

231

Solución para la versión 1 (versión de gráficos antiguos)

Según la documentación de chartjs.org

puede configurar 'bezierCurve' en las opciones y pasarlo cuando cree el gráfico.

bezierCurve: false

p.ej:

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

Actualización para la versión 2

Según documentación actualizada para Configuración de línea en opciones globales

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

p.ej:

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

Y también directamente en la Estructura del conjunto de datos estableciendo lineTensionen 0 (cero).

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.

A continuación, se muestra un objeto de datos de ejemplo que utiliza estos atributos.

var lineChartData = {
    labels: labels,
    datasets: [
        {
            label: "My First dataset",
            lineTension: 0,           
            data: data,
        }
    ]
};
Nkosi
fuente
3
Necesita bezierCurve: falseobtener una línea recta. true (valor predeterminado) le da una (bezier) Curva
potatopeelings
18
Con la nueva v2.0, para hacer esto, ahora configura tension:0.
scojomodena
5
de acuerdo con el último documento , use en lineTensionlugar de solo 'tensión'
Sphro
58

Puede utilizar la opción lineTension para establecer la curva deseada. Establezca 0 para líneas rectas. Puedes dar un número entre 0-1

data: {
    datasets: [{
        lineTension: 0
    }]
}
HasanG
fuente
1
Gracias, esto me lo corrige en v2.7.1
mfink
5

He usado lineTension para establecer la suavidad de la curva.

De los documentos : lineTension recibe un número, la tensión de la curva Bezier de la línea. Ajústelo a 0 para dibujar líneas rectas. Esta opción se ignora si se utiliza la interpolación cúbica monótona.

Solo asegúrate de probar con diferentes valores qué tan suave quieres la línea.

Por ejemplo:

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

  ]
};

Kenny Alvizuris
fuente
Esta es la respuesta correcta en 2020
jbnunn
1

Creo que se ha actualizado a lineTension. Consulte los documentos .

kaleazy
fuente