Chart.js 时间对象标签未正确更新答案

【问题标题】：Chart.js time object labels not updating correctlyChart.js 时间对象标签未正确更新
【发布时间】：2018-04-13 21:06:23
【问题描述】：

我正在使用 Chart.js 来绘制基于日期的折线图。首次加载时会显示当月的数据。

 var dayByDayChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: <?php echo json_encode($arr_dates); ?>,
            //labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
            datasets: [{
                label: '<?php echo $thisYear; ?>',
                data: [<?php echo $rev2017; ?>],
                backgroundColor: "rgba(153,255,51,0.6)"
            }, {
                label: '<?php echo $lastYear;?>',
                data: [<?php echo $rev2016; ?>],
                backgroundColor: "rgba(255,153,0,0.6)"
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        displayFormats: {
                            'millisecond': 'MMM DD',
                            'second': 'MMM DD',
                            'minute': 'MMM DD',
                            'hour': 'MMM DD',
                            'day': 'MMM DD',
                            'week': 'MMM DD',
                            'month': 'MMM DD',
                            'quarter': 'MMM DD',
                            'year': 'MMM DD'
                        }
                    }
                }]
            }
        }

    });

然后您可以通过选择一个日期范围来更新图表，我在其中构建一组新数据并使用对象传递它并运行 update()。

        dayByDayChart.data.datasets[0].data = json.this_year;
        dayByDayChart.data.datasets[1].data = json.last_year;
        dayByDayChart.data.labels = json.dates;

唯一的问题是，Chart.js 正确更新了时间段，但日期的 x 轴点数仍然相同。这意味着它们会一遍又一遍地重复。这是初始图表的示例：

然后Ajax更新了一个：

如您所见，日期范围是从 1 日到 9 日，但它会将这些日期分布在过去 28 天的 2 月。

我怎样才能让它正确更新？

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

查看文档和几个论坛后，我找到了一个可行的解决方案。带有时间配置的 Chartsjs 会尝试猜测正确的时间单位，并且在动态更新图表时，它看起来会保持之前的“猜测”。

通过我想要的实际时间单位，即现在允许图表每天只更新一次，而不是试图将一天推到多个刻度上。这是配置示例。

options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'day',
                        displayFormats: {
                            //'millisecond': 'MMM DD',
                            'second': 'MMM DD',
                           'minute': 'MMM DD',
                            'hour': 'MMM DD',
                            'day': 'MMM DD',
                            'week': 'MMM DD',
                            'month': 'MMM DD',
                            'quarter': 'MMM DD',
                            'year': 'MMM DD'
                        }
                    }
                }]
            }
        }

不同的是时间下的单位选项。

【讨论】：