将气泡图数据与来自 ChartJS 中 2 个 API url 的折线图数据相结合

Question

我正在尝试将两个数据集组合成折线图和气泡图。问题是气泡图中的日期严重错位到随机日期而不是所需的日期，尽管值（Y 轴）很好。

一个 API url 用于股票每日收盘价（折线图），第二个 API url 用于绘制我的预测交易（气泡图）。他们都使用自己数据集中的单独日期数据，但是气泡图中的日期位于折线图日期范围内，所以我想这应该不是问题（？）。

我不确定如何使气泡图数据适合折线图中的相关日期。

下面是javascript代码：

fetch("link_to_first_api_json")
  .then(response => response.json())
  .then(data => {
    const dates = data.data.map(d => d.date);
    const aaplData = data.data.map(d => d.AAPL);

    fetch("link_to_second_api_json")
      .then(response => response.json())
      .then(data => {
        const bubbleData = data.AAPL.map(d => {
          return {
            x: new Date(d.lastDate),
            y: d.lastPrice
          };
        });

        const ctx = document.getElementById("myCharttt").getContext("2d");
        const chart = new Chart(ctx, {
          type: "line",
          data: {
            labels: dates,
            datasets: [
              {
                label: "AAPL",
                data: aaplData,
                borderColor: "red"
              },
              {
                label: "Bubble Chart",
                data: bubbleData,
                backgroundColor: "blue",
                type: "bubble"
              }
            ]
          },
          options: {
            scales: {
              xAxes: [{
                type: "time",
                time: {
                  unit: "day"
                }
              }],
              yAxes: [{
                ticks: {
                  beginAtZero: true
                }
              }]
            }
          }
        });
      })
      .catch(error => console.error(error));
  })
  .catch(error => console.error(error));

“link_to_first_api_json”格式：

{
    "data": [
        {
            "date": "2022-02-01",
            "AAPL": 147.85000610351562
        },
        {
            "date": "2022-02-02",
            "AAPL": 297.30999755859375
        },
        {
            "date": "2022-02-03",
            "AAPL": 134.51950073242188
        },
        {
            "date": "2022-02-04",
            "AAPL": 153.7884979248047
        }
    ]
}

“link_to_second_api_json”格式：

{
    "AAPL": [
        {
            "lastDate": "2022-02-02",
            "lastPrice": 297.15,
        },
        {
            "lastDate": "2022-02-04",
            "lastPrice": 153.7,
        }
    ]
}

显然每个 JSON 中都有大量数据点，这些只是指定格式的片段。

HTML 代码工作正常，没问题。