Таблица.js: прямые линии вместо кривых

Question

Таблица.js: прямые линии вместо кривых

Я использую диаграмму.JS для построения набора данных,

однако я получил гладкий эффект !

вот кривая, которую я получил:

enter image description here

вот мой код :

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);



}

Как я могу иметь прямые, а не кривые ?

спасибо

567 3

chart.js

3 ответов:

Comments

Ничего не найдено.

Nkosi · Accepted Answer · 2017-01-24 15:54:22

по данным документация по 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,
        }
    ]
};

x-freestyler · Accepted Answer · 2016-07-26 13:38:55

вы можете использовать параметр lineTension, чтобы установить нужную кривую. Задайте 0 для прямых линий. Вы можете дать число от 0-1
data: {
    datasets: [{
        lineTension: 0
    }]
}

Kenny Alvizuris · Accepted Answer · 2018-03-20 13:07:59

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

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

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

например:
var data = {
  labels: ["Jan", "Feb", "Mar"],
  datasets: [{
      label: "Label 1",
      lineTension: 0.2
    }, {
      label: "Stock B",
      lineTension: 0.2
    }

  ]
};