Chart.js：直线而不是曲线 [英] Chart.js : straight lines instead of curves

问题描述

我正在使用Chart.JS绘制数据集，

I'm using Chart.JS to plot a dataset,

但是我得到了平滑的效果！

However I got a smooth effect !

这是我得到的曲线：

这是我的代码：

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

}

如何用直线代替曲线？

How can I have straight lines instead of curves ?

谢谢

推荐答案

版本1的解决方案（旧图表版本）

根据文档在chartjs.org

上，您可以在选项中设置'bezierCurve'并在创建图表时将其传递。

you can set the 'bezierCurve' in options and pass it in when you create the chart.

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的更新

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

According to updated documentation for Line Configuration in global 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直接在数据集结构中（零）。

And also directly in the Dataset Structure by setting lineTension to 0 (zero).

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.

使用这些属性的示例数据对象如下所示。

An example data object using these attributes is shown below.

var lineChartData = {
    labels: labels,
    datasets: [
        {
            label: "My First dataset",
            lineTension: 0,           
            data: data,
        }
    ]
};

这篇关于Chart.js：直线而不是曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！