Chartjs初始动画要从左到右更改(默认为从下到上)

时间:2019-01-21 10:23:55

标签: chart.js chartjs-2.6.0

使用chartjs 2.1.4(自定义一个),默认图表从底部到顶部显示动画,在我们应用程序的画布下方有两个按钮(向左和向右)

在想要从右到左单击鼠标左键图表动画时, 在右键单击图表动画时要从左到右显示

请帮助我找到解决方案 预先感谢

1 个答案:

答案 0 :(得分:0)

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>

没有简单的选择,您必须使用类似的方法。