Javascript 在ApexCharts中设置x轴刻度的特定间隔

简介：

我有一个ApexCharts图表，其中包含来自API的数据。我正在使用一个名为finnhub的API来获取图表上显示的股市数据。返回的数据具有一个价格数组和一个相应的时间数组，它们的间隔不相等（股票市场在某些时间关闭）（y轴上的价格和x轴上的时间）。我得到的数据是相当高的分辨率，这意味着x轴上有很多标签，使它看起来非常混乱和不可读。我在用鱼钩

我遇到的问题：

如您所见，x轴上显示时间的标签非常接近。看起来太乱了。我想让图表上只有大约4-5个标签，它们均匀地分布在不同的区域

代码：

我想要实现的目标：

我希望x轴上的数据标签与第二张图片中的相似（不要太杂乱，每个图表只有大约4-5个标签），同时让图表本身看起来像第二张图片（数据更改之间的距离相等）。任何帮助都将非常感激

---

PS：这是我的第一个StackOverflow问题，如果我做错了什么，很抱歉。

嗯，我也遇到了同样的问题，但在vue项目中。这对我很有帮助：

  methods: {
      onChartResize(event) {
        this.$refs.oilProductionProfile.updateOptions({
        xaxis: { tickAmount: Math.ceil(event.srcElement.innerWidth / 140) },
      });
    },
  },
  created() {
    window.addEventListener("resize", this.onChartResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.onChartResize);
  },
 

我们订阅窗口事件，根据当前窗口的innerwidth重新计算tickAmount，然后调用“updateOptions”刷新axis

import React, { useState, useEffect } from "react";
import Chart from "react-apexcharts";
import axios from "axios";
import dayjs from "dayjs";

function StockChart() {
    const [options, setOptions] = useState({
        chart: {
            type: "area",
            height: 350,
            zoom: {
                enabled: false
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: "straight"
        },
        xaxis: {
            type: "numeric",
            labels: {
                formatter: function (val) {
                    return dayjs(val).format("DD. HH:mm");
                },
                hideOverlappingLabels: Boolean,
                rotate: 0,
                trim: false
            },
            axisTicks: {
                show: true
            }
        },
        tooltip: {
            x: {
                format: "dd MMM yyyy"
            }
        },
        fill: {
            type: "gradient",
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.7,
                opacityTo: 0.9,
                stops: [0, 100]
            }
        }
    });

    const [series, setSeries] = useState([
        {
            name: "Closing Price",
            data: []
        }
    ]);

    useEffect(() => {
        axios
            .get(
    "https://finnhub.io/api/v1/stock/candle?symbol=AAPL&resolution=60&from=1572100000&to=1572910590"
            )
            .then(res => {
                setSeries(prev => {
                    for (let i = 0; i < res.data.c.length; i++) {
                        console.log(res.data.t[i]);
                        prev[0].data[i] = [res.data.t[i], res.data.c[i]];
                    }
                    console.log(prev);
                    return prev;
                });
            })
            .catch(err => console.log(err));
    });

    // Ignore the below function and state, it's just for testing
    const [disableChart, setDisableChart] = useState(false);
    function toggleChart() {
        setDisableChart(prev => !prev);
    }

    return (
        <div className="chart-container">
            <h1 onClick={toggleChart}>my chart</h1>
            {disableChart ? null : (
                <Chart options={options} series={series} type="area" width="50%" />
            )}
        </div>
    );
}

export default StockChart;

  methods: {
      onChartResize(event) {
        this.$refs.oilProductionProfile.updateOptions({
        xaxis: { tickAmount: Math.ceil(event.srcElement.innerWidth / 140) },
      });
    },
  },
  created() {
    window.addEventListener("resize", this.onChartResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.onChartResize);
  },