折线图 CanvasJS / ChartJS

Question

我目前正在学习不同的可视化库，我已经使用canvasjs构建了一个折线图， https://jsfiddle.net/r60xdqbb/

我正在尝试使用 chartjs 构建相同的内容，但无法添加类似的动画。我找到了一个 https://codepen.io/anon/pen/xqGGaV

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

有什么方法可以使用 Chartjs 生成相同的行为？

提前致谢。

CanvasJS 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();

ChartJS Javascript 代码

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
    }]
  }
});

Answer 1

Chart.js 没有这样的动画。他们只提供“从底部成长”的动画。

您也许可以使用他们的onAnimationComplete 回调一起破解某些东西，然后在添加最后一个 on 之后添加一个新数据点。我不知道性能会是什么样子，但理论上它会起作用。

根据我使用 Chart.js 的经验，如果你想做一些开箱即用的东西，你最好看看不同的库。