Javascript 线条图画布/图表

我目前正在学习不同的可视化库，我使用canvasjs构建了一个折线图，

我正在尝试使用chartjs构建相同的动画，但无法添加类似的动画。我找到了一个

但它是从下到上的，我尝试了多种方法，比如使用循环将数据集添加到图形中，但在这种情况下，包括X和Y轴在内的整个图形都在增加

有没有任何方法可以使用Chartjs生成相同的行为

提前谢谢

画布JS：

var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true,
      axisY: {
        title: " Y AXIS",
        tickLength: 0,
        lineThickness: 0,
        margin: 0,
        valueFormatString: " ", //comment this to show numeric values
        includeZero: false,
        gridColor: "transparent",
      },
      axisX: {
        title: "X Axis",
        tickLength: 0,
        margin: 0,
        lineThickness: 0,
        valueFormatString: " ", //comment this to show numeric values
        includeZero: false,
      },
      data: [{
        type: "line",
        color: "#E77973",
        dataPoints: [
          { y: 450 },
          { y: 414 },
          { y: 520 },
          { y: 460 },
          { y: 450 },
          { y: 500 },
          { y: 480 },
          { y: 480 },
          { y: 410 },
          { y: 500 },
          { y: 480 },
          { y: 510 }
        ]
      },
      {
        type: "line",
        lineDashType: "dash",
        color: "black",
        markerType: "none",
        dataPoints: [
          { y: 460 },
          { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }

        ]
      }]
    });
    chart.render();

ChartJSJavaScript代码

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
    options: {
      legend: {
        display: false,
      },
      scales: {
        xAxes: [{
          gridLines: {
            display: false,
          },
          ticks: {
            fontSize: 15,
            fontColor: 'lightgrey'
          }
        }],
        yAxes: [{
          gridLines: {
            drawBorder: false,
          },
          ticks: {
            beginAtZero: true,
            fontSize: 15,
            fontColor: 'lightgrey',
            maxTicksLimit: 5,
            padding: 25,
          }
        }]
      },
      tooltips: {
        backgroundColor: '#1e90ff'
      }
    },
    data: {
      labels: ['M', 'Tu', 'W', 'Th', 'F', 'Sa', 'Su'],
    datasets: [{
      data: [0, 0, 0, 11, 9, 17, 13],
      tension: 0.0,
      borderColor: 'rgb(255,190,70)',
      backgroundColor: 'rgba(0,0,0,0.0)',
      pointBackgroundColor: ['white', 'white', 'white', 'white', 'white', 'white', 'rgb(255,190,70)'],
      pointRadius: 4,
      borderWidth: 2
    }]
  }
});

---

Chart.js没有那样的动画。它们只提供“从底部生长”动画

您可以使用他们的

onAnimationComplete

回调一起破解一些东西，然后在添加最后一个on之后添加一个新的数据点。我不知道表演会是什么样子，但理论上它会起作用

---

根据我对Chart.js的经验，如果你想做一些不是现成的东西，你最好看看其他的库

啊。。我猜是的，在文档中找不到太多。你能推荐一些其他的开源库吗？我可以从中获得同样的动画效果。d3是我的首选。我不认为有什么是它不能处理的，尽管有一个学习曲线。