Chart.js: eğriler yerine düz çizgiler

Bir veri kümesini çizmek için Chart.JS kullanıyorum,

Yine de pürüzsüz bir etkim var!

İşte sahip olduğum eğri:

İşte kodum:

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

}

Eğriler yerine düz çizgilere nasıl sahip olabilirim?

teşekkür ederim

Sürüm 1 için Çözüm (eski grafik sürümü)

Chartjs.org'daki belgelere göre

'bezierCurve'u seçeneklerde ayarlayabilir ve grafiği oluşturduğunuzda bunu aktarabilirsiniz.

bezierCurve: false

Örneğin:

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

Sürüm 2 için güncelleme

Global seçeneklerde Hat Yapılandırması için güncellenmiş belgelere göre

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

Örneğin:

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

Ve ayrıca doğrudan Veri Kümesi Yapısında lineTension0 (sıfır) olarak ayarlayarak .

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.

Bu nitelikleri kullanan örnek bir veri nesnesi aşağıda gösterilmektedir.

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

İstenilen eğriyi ayarlamak için lineTension seçeneğini kullanabilirsiniz. Düz çizgiler için 0 ayarlayın. 0-1 arasında bir sayı verebilirsiniz

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

Eğrinin düzgünlüğünü ayarlamak için lineTension kullandım.

Gönderen docs : lineTension bir numara, hattın Bezier eğrisi gerginliğini alır. Düz çizgiler çizmek için 0'a ayarlayın. Monoton kübik enterpolasyon kullanılıyorsa bu seçenek göz ardı edilir.

Hattın ne kadar pürüzsüz olmasını istediğinizi farklı değerlerle test ettiğinizden emin olun.

Örneğin:

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

  ]
};

Sanırım olarak güncellendi lineTension. Belgeleri kontrol edin .