chart.js - 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 天时，会产生一种丑陋的视觉效果，图表的第一个点粘在一边，与新的数据点重叠，然后产生动画。

在动画之后，图表看起来像预期的那样，只是动画很丑。解释起来有点棘手，所以希望屏幕截图有所帮助。绿色箭头表示动画方向。我已将动画持续时间设置为 10 秒，因此我可以截取此屏幕截图，红色圆圈突出显示从图表右侧开始的点，然后动画到左侧。

我也试过添加这个：

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;但这给出了相同的结果。

我能做的另一件事是只更新标签。结果是图表在更改日期范围时只是在时间轴上放大，没有像示例中那样漂亮的动画。

标签： chart.js

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);
}