时间戳

首页 > 解决方案 > Chart.JS：如何制作锐利的线条来平滑曲线

javascript - Chart.JS：如何制作锐利的线条来平滑曲线

问题描述

嗨，我是图表新手，这是我的 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,
                        }
                    }]
                },
            },
        });
        }

标签： javascriptchartschart.js

解决方案

这可以通过lineTension需要在数据集上定义的选项来完成。选择一个低于 1 的值。

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

但是，默认情况下，您应该已经看到了平滑的曲线，因为根据Chart.js 文档，默认值为0.4.

lineTension：线的贝塞尔曲线张力。设置为 0 以绘制直线。

请注意，如果该steppedLine值设置为 , 以外的任何值false，lineTension将被忽略。

推荐阅读