Реагировать родной: форматирование диаграммы победы для временного столбца оси х

Question

В настоящее время я работаю с диаграммами Победы, и у меня возникла проблема с добавлением времени к оси X. Мне нужно отобразить линейный график, который показывает числа от 0 до 1(проценты) по оси Y и времена по оси X. Я просмотрел их документы и попробовал несколько сценариев, чтобы координата x отображала время, но я не вижу, как данные, которые являются данными из базы данных, должны быть отформатированы, чтобы их можно было отображать как времена. Я хотел бы, чтобы время отображалось в таком формате, как "10:30 AM" и т. Д. Я хотел бы отформатировать данные оси X и добавить метки к оси X и оси Y. Как бы я этого достиг? Должен ли я использовать объект Date или будут ли строковые форматы приемлемыми для временных данных? Какой масштаб будет приемлем для строк?

Мои текущие jsx-теги для построения графиков перечислены ниже:

constructor (props) {
    super(props);
    this.state = {
        data: props.data,
        zoomDomain: { x: [new Date(2010, 1, 1), new Date(2050, 1, 1)] }
    }
}

handleZoom(domain) {
    this.setState({ zoomDomain: domain });
}

<VictoryChart width={400} height={500} theme={VictoryTheme.material} scale={{x:"time", y:"linear"}}
                      containerComponent={
                          <VictoryZoomContainer
                              zoomDimension="x"
                              zoomDomain={this.state.zoomDomain}
                              onZoomDomainChange={this.handleZoom}
                          />
                      }>
                    <VictoryAxis
                        tickFormat={(x) => {
                          return (new Date(x)).getFullYear();
                        }}
                        orientation="bottom"
                    />
                    <VictoryAxis dependentAxis
                                 tickFormat={(y) => y / 10}
                                 orientation="left"
                    />
                    <VictoryLine
                        groupComponent={<VictoryClipContainer clipPadding={{ top: 5, right: 10 }}/>}
                        style={{ data: { stroke: "#c43a31", strokeWidth: 5, strokeLinecap: "round" } }}
                        data={this.state.data}
                        x="x"
                        y="y"/>
                </VictoryChart>

Обновление: я хотел бы попробовать это по-другому, поскольку время не работает для меня. Я хотел бы попытаться отобразить только месяц и год. Есть ли способ добиться этого, чтобы он отображал границу между месяцами, если в большинстве случаев промежуток между 5 марта и 6 марта, а линии будут отображаться между мартом и апрелем?

Вот как выглядит моя диаграмма:

Answer 1

Вы можете использовать tickFormat опора компонента VictoryAxis внутри вашего VictoryChart закажите выполнение такой операции и добавьте в нее свой собственный форматер.

 <VictoryAxis
      tickFormat={(x) => new Date(x).getHours() + ':' + new Date(x).getMinutes()}
  />

За y axis Вы можете добавить еще один тикформат с указанным фильтром как

 <VictoryAxis dependentAxis
     tickFormat={(y) => y / 20}
/>