Chart.js：曲線の代わりに直線

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

documentation on chartjs.org

によると、あなたはオプションで「ベジェ曲線」を設定し、グラフを作成するときにそれを渡すことができ、ありがとうございました。

bezierCurve: false 

例：グローバルオプションでラインコンフィギュレーションのための更新されたドキュメントによると、バージョン2

ため

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

更新

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

Answer 2

lineTensionオプションを使用して、目的のカーブを設定できます。直線には0を設定します。 0-1

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