当 x 轴是时间笛卡尔且类型为 week 时，将图表 js 数据点放在周中间

Question

我正在尝试使用图表 js 插件（版本 3）生成一个图表，并尝试使用 x 轴作为 pe 这个doc，类型设置为时间，时间单位是周。我正在使用它的作者推荐的

date-fns

适配器和 chartjs 库。

我将 alpine js 用于初始化目的，并将其轻松用于日期操作目的。一切正常。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>


<div class="project-progress-chart-wrapper" style="position: relative; padding-top:50%; padding-top:min(50%,530px)">
                    <div style="position:absolute;width: 100%;height:100%;left: 0;top: 0">
                        <canvas  id="project-progress-chart"
                            @shownextdata.window="function() {
                                const nextDate = getFourWeeksNextDate();
                                currentDate = new Date(nextDate);
                                initChartData();
                            }"
                            @showpreviousdata.window="() => {
                                const prevDate = getFourWeeksEarlierDate();
                                currentDate = new Date(prevDate);
                                initChartData();
                            }"
                            x-data="{
                                chartInstance: null,
                                init() {
                                    this.initChartData();
                                },
                                currentDate: new Date(),
                                numberOfProgressWeeks: 24,
                                getFourWeeksEarlierDate(){
                                    const date = new Date(this.currentDate);
                                    date.setDate(date.getDate() - (this.numberOfProgressWeeks * 7));
                                    return date;
                                },
                                getFourWeeksNextDate(){
                                    const date = new Date(this.currentDate);
                                    date.setDate(date.getDate() + (this.numberOfProgressWeeks * 7));
                                    return date;
                                },

                                generateChartData() {
                                    const data = [],
                                        lastSunday = this.getLastSunday(),
                                        tempLoopDate = new Date(lastSunday);

                                    while(this.getFourWeeksEarlierDate() <= tempLoopDate) {
                                        data.push({
                                            x: new Date(tempLoopDate).toISOString().split('T')[0],
                                            y: Math.floor(Math.random() * 50)
                                        })
                                        tempLoopDate.setDate(tempLoopDate.getDate() - 7)
                                    }

                                    return data;

                                   
                                },
                                getLastSunday() {
                                    const lastSunday = new Date(this.currentDate);
                                    lastSunday.setDate(this.currentDate.getDate() -  this.currentDate.getDay());
                                    return lastSunday;
                                },
                               
                                initChartData() {
                                    //setting up data
                                    const data = this.generateChartData(),
                                        progressChartData =  {
                                            datasets: [
                                                {
                                                    label: 'This Week',
                                                    fill: !0,
                                                    backgroundColor: 'transparent',
                                                    borderColor: 'rgba(2, 132, 199, 1)',
                                                    pointBackgroundColor: 'rgba(2, 132, 199, 1)',
                                                    pointBorderColor: '#fff',
                                                    pointHoverBackgroundColor: '#fff',
                                                    pointHoverBorderColor: 'rgba(2, 132, 199, 1)',
                                                    data: data,
                                                }
                                            ],
                                        };

                                    //setting up config

                                    const config = {
                                        type: 'line',
                                        data: progressChartData,
                                        options: {
                                            maintainAspectRatio: false,
                                            plugins: {
                                                legend: {
                                                    display: false
                                                },
                                                tooltip: {
                                                    
                                                }
                                            },
                                            scales: {
                                                x: {
                                                    type: 'time',
                                                    time: {
                                                        unit: 'week',
                                                        displayFormats: {
                                                            quarter: 'MMM yyyy'
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    this.chartInstance && this.chartInstance.destroy();

                                    //initialization
                                    null !== this.$el && (this.chartInstance = new Chart(this.$el, config));
                                }
                            }">
                        </canvas>
                    </div>
                    
            </div>

但我想要实现的是将图表 js x 数据与

week

而不是日期相关联，因此尝试将数据点放在周中而不是日期边缘。

我正在尝试实现这样的目标，因为数据与周而不是日期相关联，所以甚至可以悬停和更改周背景。而且正如我们所见，月份仅在每月的第一个星期日到来时才开始。有时当 5 周时一个月会更长，有时会更短。

但我最终得到的是这个。

任何人都可以帮助如何将数据与周相关联，从而尝试生成应该关注周而不是日期的对象数组吗？

即{x: '2023-W1', y: 10} 而不是 {x: '2023-01-01', y: 10} 的数组，以便 10（即 y 值）出现在第 1 周的中间？

提前谢谢你。