Chart.js:直线而不是曲线


111

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

}

我怎样才能有直线而不是曲线?

谢谢

Answers:


231

版本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

根据全局选项中线路配置的更新文档

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

3
您需要bezierCurve: false获得一条直线。true(默认值)会给您一条(
贝塞尔

18
现在,使用新的v2.0可以进行设置tension:0
scojomodena '16

5
acording到最新的文件,请使用lineTension而不只是“紧张”的
Sphro

58

您可以使用lineTension选项设置所需的曲线。将直线设置为0。您可以输入0-1之间的数字

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

1
谢谢,这为我修复了v2.7.1
mfink

5

我使用lineTension设置曲线的平滑度。

docs:lineTension接收数字,直线的Bezier曲线张力。设置为0绘制直线。如果使用单调三次插值,则忽略此选项。

只需确保使用不同的值进行测试即可使线条平滑。

例如:

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

  ]
};


这是2020
jbnunn

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.