Chart.js: các đường thẳng thay vì các đường cong

Question

Tôi đang sử dụng Chart.JS để vẽ một tập dữ liệu,

Tuy nhiên, tôi có hiệu ứng mượt mà!

Đây là đường cong Tôi đã có:

Đây là mã của tôi:

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

} 

Làm thế nào tôi có thể có đường thẳng thay vì đường cong?

Cảm ơn bạn

Answer 1

Theo documentation on chartjs.org

bạn có thể đặt 'Đường cong Bézier' trong lựa chọn và vượt qua nó trong khi bạn tạo biểu đồ.

bezierCurve: false 

ví dụ:

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

Cập nhật cho phiên bản 2

Theo tài liệu cập nhật cho dòng cấu hình trong cài đặt global

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

ví dụ:

012.

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

Và cũng trực tiếp trong Cấu trúc tập dữ liệu bằng cách đặt lineTension thành 0 (số không).

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. 

Một đối tượng dữ liệu mẫu sử dụng các thuộc tính này được hiển thị bên dưới.

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

Answer 2

Bạn có thể sử dụng tùy chọn lineTension để đặt đường cong mong muốn. Đặt 0 cho đường thẳng. Bạn có thể cung cấp số từ 0-1

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