Блог

Привет, я новичок в графиках, и это моя диаграмма на chartjs, в настоящее время она работает, но отображается четкими линиями, и я хочу сделать ее сглаженной кривыми линиями на этом графике. Есть идеи?

 function statistics(data) {
    if ($('#stats-currency').length > 0) {

        if (typeof(stats_currency) !== 'undefined') {
            stats_currency.destroy();
        }
        if (typeof(data) == 'undefined') {
            var currency = $('select[name="currency"]').val();
            $.get(admin_url   'home/stats_currency/'   currency, function(response) {
                stats_currency = new Chart($('#stats-currency'), {
                    type: 'line',
                    data: response,
                    options: {
                        responsive:true,
                        scales: {
                            yAxes: [{
                              ticks: {
                                beginAtZero: true,
                            }
                        }]
                    },
                },
            });
            }, 'json');
        } else {
            stats_currency = new Chart($('#stats-currency'), {
                type: 'line',
                data: data,
                options: {
                    responsive: true,
                    scales: {
                        yAxes: [{
                          ticks: {
                            beginAtZero: true,
                        }
                    }]
                },
            },
        });
        }
  

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

 datasets: [{
  ... 
  lineTension: 0.8
}]
  

Однако по умолчанию вы уже должны видеть изогнутые плавные линии, поскольку в соответствии с Chart.js в документации значение по умолчанию равно 0.4 .

lineTension : Натяжение линии кривой Безье. Установите значение 0 для рисования прямых линий.

Пожалуйста, обратите внимание, что если для steppedLine значения установлено что-либо иное, чем false , lineTension это значение будет проигнорировано.

вы можете сделать это, добавив значение натяжения в параметры ваших графиков

 <canvas id="myChart"></canvas>
  

JS

 const config = {
  type: 'line',   // your chart type
  data: data,   // pass here your data
  options: {
    elements: {
        line: {
            tension : 0.4  // smooth lines
        },
    },
  },
};

// pass it like
  const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );