本机反应：x轴时间列的胜利图表格式-Java 学习之路

我目前正在使用Victory图表，并且在处理向x轴添加时间方面存在问题 . 我需要显示一个折线图，显示y轴中0到1（百分比）之间的数字和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>

更新：我想以不同的方式尝试这个，因为时间不适合我 . 我想尝试只显示月份和年份 . 有没有办法实现这一点，所以如果大多数时间介于3月5日到6日之间，它会显示几个月之间的界限，但这些线将显示在3月到4月之间？

这就是我的图表最终看起来像：

enter image description here

1 回答

1
您可以在 VictoryChart 命令中使用VictoryAxis组件的tickFormat prop执行此类操作，并根据需要添加自己的格式化程序 .
```
<VictoryAxis
      tickFormat={(x) => new Date(x).getHours() + ':' + new Date(x).getMinutes()}
  />
```
对于 y axis ，您可以使用指定的过滤器添加另一个tickFormat
```
<VictoryAxis dependentAxis
     tickFormat={(y) => y / 20}
/>
```
回复于 2024-05-02T07:52:47+08:00

本机反应：x轴时间列的胜利图表格式

1 回答

相关问题