时间序列折线图 js 在反应中不起作用

Question

R/python 用户，javascript 的新用户。我正在尝试做一些我认为很简单的事情，一个在反应中使用 chart-js 的基本时间序列图表。

我似乎无法让轴正常工作，这可能是一个非常基本的错误，但我似乎找不到任何关于如何在 React 中执行此操作的文档。我的示例经常 html/js 正常工作，但没有反应？并且 react-chartjs-2 的文档很简单。

我想要一个折线图，其中 X 轴缩放到日期（我的数据是不均匀间隔的时间序列数据）。我认为您需要时间来做这件事，但我得到的只是堆叠到 1 个点上的数据（正确的 y 值，但所有值的 x 值都为零）。

我在 react-chart-js 的 codesandbox It is based of the example in the Line example 中包含了一个 link 的最小示例。

App.tsx

import React from "react";
import "chartjs-adapter-moment";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from "chart.js";
import { Chart } from "react-chartjs-2";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  response: true,
  scales: {
    xAxes: [
      {
        type: "time",
        time: {
          unit: "day"
        }
      }
    ]
  }
};

const values = [
  {
    x: new Date("2020-01-01"),
    y: 100.2
  },
  {
    x: new Date("2020-01-02"),
    y: 102.2
  },
  {
    x: new Date("2020-01-03"),
    y: 105.3
  },
  {
    x: new Date("2020-01-11"),
    y: 104.4
  }
];

export const data = {
  datasets: [
    {
      data: values
    }
  ]
};

export function App() {
  return <Line options={options} data={data} />;
}

https://codesandbox.io/s/affectionate-hopper-uiqvz?file=/App.tsx

Answer 1

这在正常情况下也不起作用，这是因为您使用 V3 时您的比例配置是 V2 样式。

在 v3 中，每个比例尺都是它自己的对象，其中键是比例尺 ID，因此不再有数组。将您的配置更改为此将使其工作：

options: {
  scales: {
    x: {
      type: 'time'
    }
  }
}

编辑：
您还需要导入并注册时间尺度而不是 x 轴的类别尺度。

Working sandbox

import {
  Chart as ChartJS,
  TimeScale, //Import timescale instead of category for X axis
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from "chart.js";
import { Chart } from "react-chartjs-2";

ChartJS.register(
  TimeScale, //Register timescale instead of category for X axis
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

时间序列折线图 js 在反应中不起作用

Time Series Line chart js in react not working

momentjs

reactjs

chart.js

react-chartjs-2