Chart.js : 곡선 대신 직선

Chart.JS를 사용하여 데이터 세트를 구성하고 있습니다.

그러나 나는 부드러운 효과를 얻었습니다!

내가 가진 곡선은 다음과 같습니다.

내 코드는 다음과 같습니다.

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

}

곡선 대신 직선을 어떻게 가질 수 있습니까?

감사합니다

버전 1 용 솔루션 (이전 차트 버전)

chartjs.org의 문서에 따르면

옵션에서 'bezierCurve'를 설정하고 차트를 만들 때 전달할 수 있습니다.

bezierCurve: false

예 :

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

버전 2 업데이트

글로벌 옵션의 라인 구성에 대한 업데이트 된 문서에 따르면

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

예 :

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

또한 lineTension0 (영) 으로 설정하여 데이터 세트 구조에서 직접 .

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.

이러한 속성을 사용하는 예제 데이터 개체는 다음과 같습니다.

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

lineTension 옵션을 사용하여 원하는 곡선을 설정할 수 있습니다. 직선은 0으로 설정합니다. 0-1 사이의 숫자를 제공 할 수 있습니다.

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

곡선의 부드러움을 설정하기 위해 lineTension을 사용했습니다.

로부터 문서 : lineTension은 다수 라인의 베 지어 곡선의 장력을 받는다. 0이면 직선을 그립니다. 모노톤 3 차 보간이 사용되는 경우이 옵션은 무시됩니다.

선을 얼마나 매끄럽게 원하는지 다른 값으로 테스트하십시오.

예를 들면 :

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

  ]
};

으로 업데이트 된 것 같습니다 lineTension. 문서를 확인하십시오 .