Question

我正在使用 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日，但它会将这些日期分摊到2月份的前28天。

如何让它正确更新？

Answer 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'
                        }
                    }
                }]
            }
        }

区别在于时间单位选项。

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

1 个答案: