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'，并在创建图表时将其传递。

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接收一个数字，Bezier曲线张力线。设置为0以绘制直线。如果使用单调三次插值，则忽略此选项。

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

例如：

＆＃13;

＆＃13;

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

  ]
};

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

Answer 5

只是为了完成版本兼容性并在此不错的线程中添加一些内容：

与 chart.js 相同 v3.x.x
（这与 v2.x.x 不向后兼容——但是，lineTension 在
内保持不变 data: { datasets: [{ lineTension: ... )

chart.js v3.x.x 的 LineTension

接下来，您可以使用 10 个按钮运行代码段，以在此处使用不同的 lineTensions（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>