React-Apexcharts, как перемещаться по оси x в пределах диапазона

Я новичок в Apexcharts, и я работаю над созданием линейного графика. Я столкнулся с вопросом об оси x диаграммы, когда пытаюсь применить массив большой длины (такой же большой, как массив длиной больше 500). Единица измерения оси x основана на времени в формате "mm:ss", отметка времени в массиве преобразуется в "mm:ss", имеет идентичное значение из-за точности. Например, в массиве временных меток есть два значения "2021-02-16T22:47:30.369704+00:00" и "2021-02-16T22:47:30.119704+00:00", эти два значения равны "47:30" при преобразовании в формат "mm:ss". В этом случае мои значения оси x выглядят как "47:29", "47:30", "47:30", "47:30", "47, 31" с дубликатами. Я напрямую передал массив, содержащий преобразованную метку времени, в конфигурацию xaxis для таких диаграмм:

  // This array is not hardcoded like below, this is for elaborate purpose
  // In order to get the values in the array, I made a network request which returned to big
  // amount of data requires me to plot in to the line chart
  cosnt arrayOfMinutesSec = ["00:00", "00:01", "00:01", "00:01", "00:02", "00:02", "00:02", 
                             ...., "04:00"];
  const options = {
    ...
    xaxis: {
      categories: arrayOfMinutesSec,
      crosshairs: {
        show: true
      }
    }
    ...
  }

Есть ли способ указать, чтобы график отображался поэтапно в пределах диапазона, вместо того, чтобы показывать каждый отдельный элемент в массиве? Что-то вроде шага каждые 5 секунд "00:00", "00:05", "00:10", ..., "03:55", "4:00"

Большое спасибо за любую помощь.


person user14459580    schedule 18.02.2021    source источник


Ответы (1)


Я только что разобрался. Внутри свойства xaxis конфигурации параметров есть свойство tickAmount, которое позволяет вам разделить ось x на значение, которое вы передаете.

person user14459580    schedule 19.02.2021