Chart.js:直线代替曲线

icnyk63a  于 2022-11-06  发布在  Chart.js
关注(0)|答案(6)|浏览(189)

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

}

如何使用直线而不是曲线?
谢谢你

q9rjltbz

q9rjltbz1#

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

根据www.example.com上的文档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,
        }
    ]
};
3yhwsihp

3yhwsihp2#

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

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

db2dz4w83#

只是为了完成版本兼容性,并添加一些东西到这个不错的线程在这里:
仍然与chart.jsv3.x.x相同
(它与v2.x.x不向后兼容--但是,lineTension
data: { datasets: [{ lineTension: ...

chart.js v3.x.x的线张力

接下来,您可以Run the snippet使用10个按钮来播放不同的lineTensions(01),就在这里:
第一个

uelo1irk

uelo1irk4#

我已使用lineTension设置曲线的平滑度。
docs:lineTension接收一个数字,即线条的贝塞尔曲线张力。设置为0可绘制直线。如果使用单调三次插值,则忽略此选项。
只要确保用不同的值测试你想要的线有多平滑。
例如:

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

  ]
};
3vpjnl9f

3vpjnl9f5#

我想它已经被更新为lineTension。检查docs

kmbjn2e3

kmbjn2e36#

Chart.js v3.9.1 -属性tension。文档链接

相关问题