Chart.js: прямые линии вместо кривых

Я использую 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

Согласно документации на 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,
        }
    ]
};

Ответ 2

Вы можете использовать параметр lineTension для установки нужной кривой. Установите 0 для прямых линий. Вы можете указать число между 0-1

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

Ответ 3

Я использовал lineTension, чтобы установить плавность кривой.

Из документов: lineTension получает число, кривую Безье по напряжению линии. Установите 0, чтобы рисовать прямые линии. Эта опция игнорируется, если используется монотонная кубическая интерполяция.

Просто проверьте с различными значениями, насколько гладкой должна быть линия.

Например:

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

  ]
};