Chart.js : straight lines instead of curves

Question

我正在使用 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);

}

如何用直线代替曲线？

谢谢

Answer 1

版本 1 的解决方案(旧图表版本)

根据documentation on 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
        }
    }
};

也可以直接在数据集结构中将 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,
        }
    ]
};