如何在Chart.js中生成时间图表？

Question

我正在制作一个简单的服务器日志，我想使用 Chart.js 生成按小时、天、月或年的总点击报告。这是我的代码：

import { ChartColors } from "$fresh_charts/utils.ts";
import Chart from "../../islands/chart.tsx";

const data = [
  { x: "2016-12-25", y: 20 },
  { x: "2017-12-26", y: 10 },
  { x: "2020-12-26", y: 10 },
  { x: "2024-12-26", y: 10 },
]
export default function ChartPage(props) {
  return (
    <div class="p-4 mx-auto max-w-screen-md">
      <Chart
        type="line"
        options={{
          scales: {
            x: {
              type: "time",
              time: {
                "unit": "year",
              },
              displayFormats: {
                "year": "YYYY",
              },
            },
            y: { beginAtZero: true },
          },
        }}
        data={{
          datasets: [
            {
              label: "Users",
              data: data,
              borderColor: ChartColors.Blue,
              borderWidth: 1,
            },
          ],
        }}
      />
    </div>
  );
}

如果我完全注释掉 x 比例选项，那么图表就会生成得很好（尽管比例不正确）。如果我保留 x 比例选项，则无法渲染它。我知道我在 Time Cartesian Axis 中配置了一些错误，但我无法弄清楚。如何做到这一点？

Answer 1

我相信您没有安装和导入 Date Adapter 库。

1. 安装日期适配器库。

{
  ...,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "chart.js": "^4.4.2",
    "chartjs-adapter-moment": "^1.0.0"
  },
  ...
}

2. 导入chart.tsx中的日期适配器库

import 'chartjs-adapter-moment';

演示@StackBlitz