使用chartjs 2.1.4(自定义一个),默认图表显示动画自下而上,在我们的应用程序下方画布两个按钮(左和右)
在点击左键图表动画想要从右到左,在点击右键图表动画想要从左到右显示
请提前帮助我找到解决方案
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>
没有简单的选择,你必须使用这样的东西。