Chartjs添加数据时意外的视觉动画效果

Question

我有一个长长的数组，我用Javascript把数据切成片，以便在我的图表中显示不同日期范围的数据，这样后台只需要获取一次数据，我就可以在客户端把数据切成片。这样后端只需要获取一次数据，我就可以在客户端对其进行分片。

// All data
var allLabels = [
    // data here
];
var allData = [
    // data here
];

然后我就做了。

var labelsCount = allLabels.length;
var dataCount = allData.length;
var updatedLabels;
var updatedData;

if($date_range === 'last_7_days')
{
    updatedLabels = allLabels.slice(labelsCount - 7);
    updatedData = allData.slice(labelsCount - 7);
}
if($date_range === 'last_30_days')
{
    updatedLabels = allLabels.slice(labelsCount - 30);
    updatedData = allData.slice(labelsCount - 30);
}

scoreChart.data.labels = updatedLabels;
scoreChart.data.datasets[0].data = updatedData;

scoreChart.update({
    duration: 1000,
    easing: 'easeInOutExpo'
});

这一切都和预期的一样 当从30天切换到7天的时候，7天右边的点消失了，而图表的比例和增长很好地达到了新的7天x轴。

反之，当你有了7天的图形，然后切换到30天时，会产生一个丑陋的视觉效果，图形的第一个点粘在旁边，与新的数据点重叠，然后产生动画。

动画之后，图形看起来和预期一样，只是动画很丑。解释起来有点麻烦，希望截图能帮到大家。绿色箭头表示动画方向。我把动画的持续时间设置为10s，所以我可以拍下这张截图，红色的圆圈突出了从图形右边开始的点，然后向左边动画。

我还试着加了这个。

scoreChart.data.labels.pop();
scoreChart.data.datasets[0].data.pop();
scoreChart.update();

还有这个

scoreChart.data.labels = [];
scoreChart.data.datasets[0].data = [];
scoreChart.update();

在这条线之前 scoreChart.data.labels = updatedLabels; 但结果是一样的。

我可以做的另一件事是只更新标签。结果是，当改变日期范围时，图表只是在时间轴上放大，没有像他们在 榜样.

Answer 1

你可以尝试先把所有标签和数据删除，当切换到'last_30_days'时。

if($date_range === 'last_30_days')
{
    scoreChart.data.labels = [];
    scoreChart.data.datasets[0].data = [];
    scoreChart.update({
      duration: 500,
      easing: 'easeInOutExpo'
    });

    updatedLabels = allLabels.slice(labelsCount - 30);
    updatedData = allData.slice(labelsCount - 30);
}