[解決済み] 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
        }
    }
};

また、Dataset Structureに直接、設定することで 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,
        }
    ]
};