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


113

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

}

Как сделать прямые линии вместо кривых?

Спасибо

Ответы:


233

Решение для версии 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

Согласно обновленной документации для Line Configuration в глобальных опциях

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,
        }
    ]
};

3
Вам нужно bezierCurve: falseполучить прямую линию. true (по умолчанию) дает вам кривую
безье

18
В новой версии 2.0 для этого вы теперь установите tension:0.
scojomodena

5
согласно последнему документу , пожалуйста, используйте lineTensionвместо просто «напряжение»
Sphro,

58

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

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

1
Спасибо, это исправляет это для меня на
v2.7.1

6

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

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

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

Например:

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

  ]
};


Это правильный ответ в 2020 году
jbnunn

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.