react-native - 反応ネイティブ: x 軸の時間列の勝利チャートの書式設定

Question

現在、勝利チャートを扱っており、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 月の間に表示されますか?

これは私のチャートが最終的にどのように見えるかです: