javascript - 如何格式化 ApexCharts 中的 x 轴标签

Question

我有一个返回如下数据的 API：

[
    {
        "attributes": {
            "type": "AggregateResult"
        },
        "expr0": 25937961.52,
        "expr1": 1,
        "expr2": 2020
    },
    {
        "attributes": {
            "type": "AggregateResult"
        },
        "expr0": 4092447.85,
        "expr1": 3,
        "expr2": 2020
    },
    {
        "attributes": {
            "type": "AggregateResult"
        },
        "expr0": 18509414.84,
        "expr1": 6,
        "expr2": 2019
    },
    {
        "attributes": {
            "type": "AggregateResult"
        },
        "expr0": 13572118.12,
        "expr1": 10,
        "expr2": 2019
    },
...

哪里expr0是货币价值，expr1是月份，expr2是年份。我在 React 中使用 ApexCharts 在我的网站上显示结果，但是我似乎无法正确格式化数据。我的组件如下所示，但它目前只显示一个点。我不确定数据点是否需要显示 x/y 键，或者日期是否需要在选项中的 x 轴上。

class SFAllTimeQuoteValue extends Component {
    constructor(props) {
        super(props);
        this.state = {
            series: [{
                name: "Opportunities",
                data: []
            }],
            options: {
                chart: {
                    id: "line"
                },
                xaxis: {
                    type: "date"
                }

            }
        }
    }

    async componentDidMount() {

        var res = await axios.get(api);
        const value = res.data;
        var data = [];
        for(var i = 0; i < value.length; i++) {
            var date = new Date(value[i].expr2, value[i].expr1 - 1);
            data.push([date, value[i].expr0]);
        }

        this.setState({
          series: [{
            data: data
          }]
        })

      }

    render() {
        return (
            <div>
                <Chart series={this.state.series} type ='line' options ={this.state.options}/>
            </div>
        )
    }
}

我希望数据点也只显示月份和年份作为标签，但是使用我当前的方法，我得到完整的日期时间字符串作为标签。

标签： javascriptreactjsapexcharts

Answer 1

您应该将 xaxis 类型设置为 datetime 并设置labels.format属性

xaxis: {
  type: 'datetime',
  labels: {
    format: 'MM yyyy'
  }
}