7

我目前正在使用胜利图表，并且在处理向 x 轴添加时间时遇到问题。我需要显示一个折线图，在 y 轴上显示 0 到 1（百分比）之间的数字，在 x 轴上显示时间。我已经查看了他们的文档，并尝试了几种方案来让 x 坐标显示时间，但我没有看到数据库中的数据需要如何格式化才能显示为时间。我希望时间以“上午 10:30”等格式显示。我想格式化 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 月之间显示？

这是我的图表最终的样子：

在此处输入图像描述

4

1 回答 1

2

您可以在订单中使用VictoryAxis组件的tickFormatprop执行此类操作，并根据需要添加自己的格式化程序。VictoryChart

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

因为y axis您可以添加另一个带有指定过滤器的 tickFormat 作为

 <VictoryAxis dependentAxis
     tickFormat={(y) => y / 20}
/>
于 2018-05-09T04:58:35.407 回答