Chart JS使用平滑线

Question

如何在折线图中绘制大量数据但线条平滑？我目前正在尝试绘制360点，点半径设置为0.我还将标签数组设置为360，但使用maxTickLimit仅显示30个标签。当所有点都绘制在图表上时，线条看起来不直。我尝试了cubicBezier选项以及线张力，但它不起作用。

    let ctx = document.getElementById("myChart-" + this.props.keys);
    this.linegraph = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [
                {
                    data: [array with 360 elements],
                    borderWidth: 3,
                    borderColor: "#00C7B1",
                    fill: false,
                    lineTension: 0,
                    cubicInterpolationMode: 'default'
                    // backgroundColor: "#00C7B1"
                },
                {
                    data: [array with 360 elements],
                    borderWidth: 3,
                    borderColor: "#1FA7B9",
                    fill: false,
                    lineTension: 0,
                    cubicInterpolationMode: 'default'
                    // backgroundColor: "#1FA7B9"
                }
            ],
            // labels: this.props.xLabels
        },
        options: {
            elements: {
                line: {
                    tension: 0
                },
                point: {
                    radius: 0
                }
            },
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Average Total Net Costs/Month'
                    },
                    ticks: {
                        min: 0,
                        max: 2000000,
                        callback: function (value, index, labels) {
                            if (value < 200000) {
                                return '$0';
                            }
                            return '$' + String(value).slice(0, String(value).length - 3) + 'k';
                        }
                    }
                }],
                xAxes: [{
                    type: 'category',
                    scaleLabel: {
                        display: true,
                        labelString: 'Years at Residence'
                    },
                    labels: this.state.labels,
                    ticks: {
                        // min: 1,
                        // max: 60,
                        autoSkip: true,
                        maxTicksLimit: 30,
                        // stepSize: 24
                        callback: function (value, index, labels) {
                            return Math.floor(index / 12) + 1;
                        }
                    },
                }],
            },
            legend: {
                display: false
            },
            layout: {
                padding: {
                    left: 15,
                    right: 15,
                    top: 20,
                    bottom: 40
                }
            },
            responsive: true,
            maintainAspectRatio: false,
            // cutoutPercentage: 83
        }
    });