Chart.js：直线而不是曲线

Posted 2023-02-16

【中文标题】Chart.js：直线而不是曲线

【英文标题】：Chart.js : straight lines instead of curves

【发布时间】：2016-03-27 23:45:09

【问题描述】：

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

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

谢谢

【参考方案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,
        
    ]
;

【讨论】：

您需要bezierCurve: false 才能获得一条直线。 true （默认）给你一个（贝塞尔）曲线

使用新的 v2.0，为此，您现在设置 tension:0。

根据the latest document，请使用lineTension 而不是“紧张”

【参考方案2】：

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

data: 
    datasets: [
        lineTension: 0
    ]

【讨论】：

谢谢，这在 v2.7.1 上为我解决了问题

【参考方案3】：

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

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

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

例如：

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

  ]
;

【参考方案4】：

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

【参考方案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  ></canvas>

【讨论】：

谢谢，linetension 成功了。奇怪的是，实际上没有人将此帖子标记为答案。也许你写的信息太多了？