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

ตามเอกสารที่อัปเดตสำหรับ Line Configuration ในตัวเลือกส่วนกลาง

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

และยังอยู่ในโครงสร้างชุดข้อมูลโดยตรงด้วยการตั้งค่าlineTensionเป็น 0 (ศูนย์)

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 ได้รับตัวเลขความตึงของเส้นโค้ง Bezier ของเส้น ตั้งค่าเป็น 0 เพื่อวาดเส้นตรง ตัวเลือกนี้จะถูกละเว้นหากใช้การแก้ไขแบบโมโนโทนลูกบาศก์

เพียงตรวจสอบให้แน่ใจว่าได้ทดสอบด้วยค่าที่แตกต่างกันว่าคุณต้องการให้เส้นเรียบแค่ไหน

ตัวอย่างเช่น:

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

  ]
};

lineTensionฉันคิดว่ามันจะได้รับการปรับปรุง ตรวจสอบเอกสาร