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