在图表JS中使用多个日期轴

Question

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

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

我很高兴自己管理x， y对象的数据构造。

我已经建立了一个代码笔，显示我认为应该工作的内容，但我现在只得到一个空白的图表，所以我显然做错了什么。

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'
        }
      }
    }
  }
});

我发现目前还不清楚基于时间的数据和轴应该如何工作，因此任何帮助都将不胜感激。

所需布局

Answer 1

你遇到的问题是因为两件事。第一件事是，您没有使用您所使用的日期适配器。您正在使用另一个，并使用skypack导入它，这也有导入图表的巨大副作用。js本身。图表的版本。skypack导入的js是版本2。

你正在链接的库似乎没有一个版本可以在你的浏览器中工作，即使是使用脚本标签的例子。因此，如果您想使用day.js，您需要编写自己的日期适配器。

使用js日期和日期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"
        }
      }
    },
  }
});

html prettyprint-override"><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>