在 ChartJS 中使用多个日期轴

Working with multiple date axes in ChartJS

我正在尝试设置一个包含 2 个数据集的图表,1 个数据集作为一条线显示一个月的中值,1 个数据集作为散点图显示某一天的值。每日日期不需要显示在 x 轴上。

我在应用程序的其他地方使用 dayjs 作为我的时间格式库,所以我尝试使用 chartjs-adapter-dayjs-3 library.

我很乐意自己为数据管理 x,y 对象的构造。

我已经设置了一个 codepen 来显示我认为应该起作用的东西,但我现在只是得到一张空白图表,所以我显然做错了什么。

import dayjs from "https://cdn.skypack.dev/dayjs@1.10.7";
import * as chartjsAdapterDayjs from "https://cdn.skypack.dev/chartjs-adapter-dayjs@1.0.0";


const ctx = document.getElementById("myChart");
const today = dayjs()

const myChart = new Chart(ctx, {
  data: {
    datasets: [
      {
        label: "Median Sales",
        data: [
          {x: today, y: 10},
          {x: today.add(1, 'month'), y: 20}, 
          {x: today.add(2, 'month') , y: 15}
        ],
        type: "line",
        xAxisID: 'x1'
      },
      {
          label: 'Individual Sales Prices',
          data: [{x: today, y: 8}],
          type: 'scatter',
          xAxisID: 'x2'
        }
    ]
  },
  options: {
    scales: {
      x1: {
        type: 'time',
        time: {
           unit: 'month'
        }
      },
      x2: {
        type: 'time',
        time: {
           unit: 'day'
        }
      }
    }
  }
});

我发现关于基于时间的数据和坐标轴目前应该如何工作有点不清楚,因此我们将不胜感激。

所需布局

您遇到的问题是因为两件事。第一件事是您没有使用您所说的日期适配器。您正在使用另一个并使用 skypack 导入它,这有一个很大的副作用,即 import Chart.js 本身。 skypack导入的Chart.js版本是2.

您链接的库似乎没有在您的浏览器中突然出现的可用构建,即使他们的示例使用脚本标签也是如此。因此,如果您想使用 day.js,您将需要编写自己的日期适配器。

仅使用 js 日期和使用 date-fns 日期适配器的示例:

let start = new Date(),
  end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.

new Chart(document.getElementById("lastSevenDaysOverview"), {
  type: "line",
  data: {
    datasets: [{
        label: 'Dataset 1',
        data: [{
          x: new Date('10-16-2021'),
          y: 1
        }, {
          x: new Date('10-18-2021'),
          y: 4
        }, {
          x: new Date('10-19-2021'),
          y: 66
        }],
        borderColor: '#ff3366',
        backgroundColor: '#ff3366',
      },
      {
        label: 'Dataset 2',
        data: [{
          x: new Date('10-16-2021'),
          y: 31
        }, {
          x: new Date('10-18-2021'),
          y: 14
        }, {
          x: new Date('10-19-2021'),
          y: 6
        }],
        borderColor: '#880000',
        backgroundColor: '#880000'
      }
    ]
  },
  options: {
    interaction: {
      mode: 'index',
      intersect: true,
    },
    responsive: true,
    scales: {
      y: {
        type: 'linear',
        display: true,
        position: 'left',
      },
      x: {
        type: "time",
        time: {
          unit: "day"
        }
      }
    },
  }
});
<canvas id="lastSevenDaysOverview"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>