реагировать родной: форматирование диаграммы победы для временного столбца оси х - PullRequest
0 голосов
/ 09 мая 2018

В настоящее время я работаю с диаграммами Победы, и у меня возникла проблема с добавлением времени к оси 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 марта, но линии будут отображаться между мартом и апрелем?

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

enter image description here

1 Ответ

0 голосов
/ 09 мая 2018

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

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

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

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