web-dev-qa-db-ja.com

Chart.js：曲線ではなく直線

Chart.JSを使用してデータセットをプロットしていますが、

しかし、私はスムーズな効果を得ました！

これが私が持っている曲線です：

enter image description here

ここに私のコードがあります：

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

}

曲線の代わりに直線を使用するにはどうすればよいですか？

ありがとうございました

chart.js
79
taboubim

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,
        }
    ]
};
174
Nkosi

LineTensionオプションを使用して、目的の曲線を設定できます。直線には0を設定します。 0-1の間の数を与えることができます

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

LineTensionを使用して、曲線の滑らかさを設定しました。

docs から：lineTensionは、ラインのベジエ曲線の張力の数値を受け取ります。 0に設定すると、直線が描画されます。単調キュービック補間が使用されている場合、このオプションは無視されます。

線をどれだけ滑らかにしたいかを異なる値でテストしてください。

例えば：

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

  ]
};
2
Kenny Alvizuris