Chart.js: garis lurus, bukan kurva

Saya menggunakan Chart.JS untuk memplot kumpulan data,

Namun saya mendapat efek yang halus!

Ini kurva yang saya punya:

Ini kode saya:

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

}

Bagaimana saya bisa memiliki garis lurus dan bukan kurva?

Terima kasih

Solusi untuk Versi 1 (versi grafik lama)

Menurut dokumentasi di chartjs.org

Anda dapat mengatur 'bezierCurve' dalam opsi dan meneruskannya saat Anda membuat bagan.

bezierCurve: false

misalnya:

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

Perbarui untuk versi 2

Menurut dokumentasi yang diperbarui untuk Konfigurasi Jalur dalam opsi global

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

misalnya:

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

Dan juga langsung di Dataset Structure dengan mengatur lineTensionke 0 (nol).

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.

Contoh objek data yang menggunakan atribut ini ditunjukkan di bawah ini.

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

Anda dapat menggunakan opsi lineTension untuk mengatur kurva yang diinginkan. Atur 0 untuk garis lurus. Anda bisa memberi angka antara 0-1

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

Saya telah menggunakan lineTension untuk mengatur kelancaran kurva.

Dari dokumen : lineTension menerima angka, tegangan kurva Bezier dari garis. Setel ke 0 untuk menggambar garis lurus. Opsi ini diabaikan jika interpolasi kubik monoton digunakan.

Pastikan untuk menguji dengan nilai yang berbeda seberapa halus garis yang Anda inginkan.

Sebagai contoh:

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

  ]
};

Saya pikir itu telah diperbarui ke lineTension. Periksa dokumennya .