Chartjs 初始动画想要从左到右改变(默认是从下到上)动画、从下到上、Chartjs、左到右

2023-09-07 12:26:38 作者:删得了记录删不了回忆

使用chartjs 2.1.4(自定义一个),默认图表显示动画自下而上,在我们的应用程序画布下方两个按钮(左右)

using chartjs 2.1.4 (customized one), default chart showing animation bottom to top, in our application downside of canvas two buttons (left and right)

在点击左键图表动画要从右到左,在点击右键图表动画想要从左到右显示

in click on left button chart animation want to right to left, in click on right button chart animation want to show left to right

请帮我找到解决办法提前致谢

please help me to find a solution thanks in advance

推荐答案

var myData = [{x:0,y:0},{x:1,y:2},{x:2,y:1},{x:3,y:3}];
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      data: [myData[0]],
      lineTension: 0
    }]
  },
  labels:['a','a','a','a','a','a',],
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        ticks: {
          min: 0,
          max: 3
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 3
        }
      }]
     }
  }
});
var next = function() {
  var data = myChart.data.datasets[0].data;
  var count = data.length;
  data[count] = data[count - 1];
  myChart.update({duration: 0});
  data[count] = myData[count];
  myChart.update();
  if (count < myData.length) {
    setTimeout(next, 1000);
  }
}
setTimeout(next, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<canvas id="myChart"></canvas>

没有简单的选择,你必须使用这样的东西.