Chartjs 初始动画想要从左到右改变(默认是从下到上) [英] Chartjs initial animation want to change from left to right (default it is bottom to top)

问题描述

使用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>

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

这篇关于Chartjs 初始动画想要从左到右改变(默认是从下到上)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！