Chart.js平滑画线动画

Question

我想使Chart.js折线图从左到右平滑地绘制线条。我要在行尾也添加图标。

到目前为止，我已经能够上线，但是过渡非常艰难。这是真正的基本方法，只需向图形添加新的数据点。有人可以帮我解决这个问题吗？

谢谢

这是codepen：https://codepen.io/anon/pen/OwYGrp?editors=0010

代码：

const datam = [510, 13357, 19950, 26679, 32514, 37720, 44487, 50596, 56095, 50000, 40670]

var noneimg = new Image();

noneimg.src = 'https://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png'
var sun = new Image();
sun.src = 'https://i.imgur.com/yDYW1I7.png';
function animation (u) {

    function animatePart(u) {
        myChart.data.datasets[0].data.push(datam[u]);
        Chart.pluginService.register({
            afterUpdate: function(chart) {
                if (u>0 && u <datam.length) {
                          myChart.config.data.datasets[0]._meta[0].data[u-1]._model.pointStyle = noneimg;

                }
        myChart.config.data.datasets[0]._meta[0].data[u]._model.pointStyle = sun;

    }
});        
myChart.update();
        }
    for (let i = 0; i<=datam.length; i++) {
        (function() {
        setTimeout(function () { animatePart(i); }, 200+ ( i * 580 ));
    })()}

    }


var ctx = document.getElementById("line_chart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017" ],
        datasets: [{
            label: 'xxxx xx',
            radius: 0.7,
            fill: '#FFFFFF',
            data: [],
            backgroundColor: 'dodgerblue',
            borderColor: 'dodgerblue',
            borderWidth: 4,
        },{
        label: 'xxxx',
        fill: '#FFFFFF',
        radius: 0.7,
        data: [],
        backgroundColor: 'indianred',
        borderColor: 'indianred',
        borderWidth: 5

    }]
},
options: {
                responsive: true,
                maintainAspectRatio: false,
                title: {
                    display: true,
                    text: 'xxx',
                    fontSize: 24,
                    fontFamily: "open sans",
                    fontColor: 'black',
                    fontStyle: 'bold',
                },
                legend: {
                    labels: {
                        fontColor: 'black',
                        fontSize: 16,
                }},
                tooltips: {
                    mode: 'index',
                    intersect: false,
                    backgroundColor: 'black',
                    titleFontColor: 'white',
                    titleFontSize: 16,
                    bodyFontSize: 13,
                    bodyFontColor: 'white',
                    bodySpacing: 3,
                    yPadding: 8,
                    borderColor: 'black',
                },
                hover: {
                    mode: 'nearest',
                },
                animation: {
                        duration: 1600,
                        numSteps: 10,
                        easing: "easeInQuad",
                },
                scales: {
                    xAxes: [{
                        ticks: {
                            fontColor: 'black',
                            fontSize: 16,
                        },
                        display: true,
                        scaleLabel: {
                            display: false,
                            labelString: 'xxx'
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            min: 0,
                            max: 70000,
                            beginAtZero: false,
                            fontColor: 'black',
                            fontSize: 16,
                        },
                        display: true,
                        scaleLabel: {
                            display: false,
                            labelString: 'xx'
                        }
                    }]
                },
            }
})

animation()