如何在chartjs中制作日期框架/时间框架

如何解决如何在chartjs中制作日期框架/时间框架

我正在使用 chartjs 构建股票交易图表，我想包含一个日期框架，根据所选日期框架将数据可视化到该日期框架中。我希望它执行此 link 中的图表可以执行的操作，例如可以在日期框架上进行选择，并在所选框架上绘制折线图。我设法将图表开发到目前为止，我只是在尝试将框架连接到标签以使其具有响应性时迷路了。

这是我的图表到目前为止的样子。请注意，我正在从 csv 文件中获取数据

Image

这是我的脚本

const xlabels = [];
    const yprice = [];
    chartIt();
    
    async function chartIt(){
        await getData();
        const ctx = document.getElementById('myChart').getContext('2d');
        
        var myChart = new Chart(ctx,{
            type: 'line',data: {
                labels: xlabels,datasets: [{
                    label: 'Stock Trading',data: yprice,fill: false,backgroundColor: 'rgba(255,99,132,0.2)',borderColor: 'rgba(0,255,1.0)',borderWidth: 1,showXlabels: 10,pointRadius: 0
                }]
            },options: {
                scales: {
                    xAxes: [{                        
                        ticks: {
                            autoSkip: true,maxTicksLimit: 12,maxRotation: 0,minRotation: 0
                        },}],}
            }
        });
    }
    async function getData() {
        const response = await fetch('Dataset/table_data.csv');
        const data = await response.text();
        

        const table = data.split('\n').slice(2);
        
        table.forEach(row =>{
            const columns = row.split(',');
            
            const day = columns[0];
            xlabels.push(day)
            const price = columns[3];
            yprice.push(price);
            console.log(day,price)
        });
        
    }

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class,and buttons on mouse-over */
.active,.btn:hover {
  background-color: #1a73e8;
  color: white;
}

<div id="myDIV">
            <button class="btn active" onclick="changeData(0)">1D</button>
            <button class="btn" onclick="changeData(1)">1W</button>
            <button class="btn" onclick="changeData(2)">1M</button>
            <button class="btn" onclick="changeData(3)">6M</button>
            <button class="btn" onclick="changeData(4)">1Y</button>
            <button class="btn" onclick="changeData(5)">Inception</button>
        </div>
    <canvas id="myChart" width="800" height="300"></canvas>

这是我能做的最好的。我尝试添加更多代码，但他们没有根据选择的日期框架更改图表。请看一看并告诉我要添加什么，以便在此 link 中可以正常工作，我还是 chartjs 的新手。我将不胜感激任何帮助以完成这项工作。谢谢！