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

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

根据documentation on 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,
        }
    ]
};

Answer 2

您可以使用 lineTension 选项来设置所需的曲线。为直线设置 0。你可以给一个介于 0-1 之间的数字

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

Answer 3

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

来自docs：lineTension 收到一个数字，线的贝塞尔曲线张力。设置为 0 以绘制直线。如果使用单调三次插值，则忽略此选项。

只需确保使用不同的值测试您希望线条的平滑程度。

例如：

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

  ]
};

Answer 4

我认为它已更新为lineTension。检查docs。

Answer 5

只是为了完成版本兼容性并在这里为这个不错的线程添加一些东西：

还是和chart.js一样v3.x.x
（与 v2.x.x 不向后兼容——但是，lineTension 在
data: { datasets: [{ lineTension: ... 内保持不变）

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

接下来，您可以在此处运行 sn-p，使用 10 个按钮来玩不同的线张力（0 到 1）：

// for now, let's assume sample data
let sample_data = {
  "Labels" : [
    "2021-08-02",
    "2021-08-03",
    "2021-08-04",
    "2021-08-05",
    "2021-08-06"
  ],
  "Values": [
    6,
    4,
    3,
    8,
    2
  ]
};


// Draw chart
const ctx = document.querySelector('canvas').getContext('2d');

const myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: sample_data.Labels,
    datasets: [{
      label: 'LineTension Sample',
      data: sample_data.Values,
      lineTension: 0,
      borderColor: 'rgba(0,255,0,1)',
      backgroundColor: 'rgba(0,255,0,0.3)',
      fill: true
    }]
  }
});

function lineTension(event) {
  // Redraw the chart with modified lineTension

  // a bit of 'button-cosmetics' here
  // enabling all buttons
  document.querySelectorAll('button').forEach(element => element.disabled = false);
  // disabling the pressed button
  event.target.disabled = true;

  // setting programmatically the 'lineTension' here
  myLineChart.data.datasets[0].lineTension = parseFloat(event.target.dataset.linetension);

  myLineChart.update();
};

  button {
    color: blue;
  }
  button:disabled {
    color: black;
    background-color: rgba(0,255,0,0.3);
  }

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you the latest version of Chart.js, now at v3.5.0 -->

<button onclick="lineTension(event)" data-linetension="0" disabled>0</button>
<button onclick="lineTension(event)" data-linetension="0.1">0.1</button>
<button onclick="lineTension(event)" data-linetension="0.2">0.2</button>
<button onclick="lineTension(event)" data-linetension="0.3">0.3</button>
<button onclick="lineTension(event)" data-linetension="0.4">0.4</button>
<button onclick="lineTension(event)" data-linetension="0.5">0.5</button>
<button onclick="lineTension(event)" data-linetension="0.6">0.6</button>
<button onclick="lineTension(event)" data-linetension="0.7">0.7</button>
<button onclick="lineTension(event)" data-linetension="0.8">0.8</button>
<button onclick="lineTension(event)" data-linetension="0.9">0.9</button>
<button onclick="lineTension(event)" data-linetension="1">1</button>

<canvas width="320" height="240"></canvas>