javascript - 带日期 DD-MM-YYYY 的 Chart.js x 轴 - React

Question

我正在尝试使用库 Chart.js 显示图表。

我的数据的格式是:

data: [["15-11-2019", 25], ["16-11-2019", 35], ["17-11-2019", 40], ["18-11-2019", 20], ["19-11-2019", 15]]

我无法在时间轴上转换 x 轴。

我试图将 time 类型的 options 参数传递给它，但它似乎不起作用。图形呈现，但是x轴不存在，只有y轴存在。

import React, {Component,  useState, useEffect, useCallback} from 'react';
import Plot from 'react-plotly.js';
import { Chart } from 'react-charts'

function MyChart() {
    const data = React.useMemo(
        () => [
            {
                label: 'Series 1',
                data: [["15-11-2019", 25], ["16-11-2019", 35], ["17-11-2019",40], ["18-11-2019", 20], ["19-11-2019", 15]]
            }],
        []
    )

    const axes = React.useMemo(
        () => [
            { primary: true, type: 'linear', position: 'bottom' },
            { type: 'linear', position: 'left' },
        ],
        []
    )

    const options = React.useMemo(
        () => [
            {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'day'
                }
            }]
        }
    }
        ],
        []
    )

    return (
        // A react-chart hyper-responsively and continuusly fills the available
        // space of its parent element automatically
        <div
            style={{
                width: '600px',
                height: '500px'
            }}
        >
            <Chart data={data} axes={axes} options={options}/>
        </div>
    )
}

export default MyChart;

Answer 1

更新:请参阅文档中有关格式的特定行

The x-axis data points may additionally be specified via the t or x attribute when using the time scale. See more here https://www.chartjs.org/docs/latest/axes/cartesian/time.html

您的数据字段必须是 x、y 值的字典/对象:

data: [{x: "2019-01-03", y: 15}, {x: "2019-01-04", y: 18}, ...]

---

创建图表时，在options.scales 中设置type:

...,
options: {
 scales: {
  xAxes: [{
   type: 'time',
  }]
},
...