如何使用 Victory Charts 特別是 Victory Candlestick 錯開 x 軸值

Question

我正在 React Native 中構建一個應用程序，並使用 Victory Candlestick 圖表來顯示來自 Alpha Vantage 的股票的（開盤價、最高價、最低價、收盤價）OHLC 數據。 當我將數據傳遞給圖表時，圖表會顯示蠟燭，但 x 軸值太多並且相互重疊。 結果圖表的圖像如下所示：

如何更改 x 軸以呈現刻度月份（“jan”、“feb”、“mar”等）？

生成此圖表的代碼如下所示：

 <VictoryChart theme={VictoryTheme.material} domainPadding={{ x: 25 }} scale={{ x: 'time' }} > <VictoryAxis // tickValues={[5, 6, 7, 8, 9, 10, 11, 12]} // domain={{x: [0, 100]}} scale='time' // tickFormat={(t) => `${t}`} // tickFormat={(t) => `${t.slice(0, 2)}`} tickFormat={(t) => new Date(t).getFullYear()} /> <VictoryAxis dependentAxis axisLabelComponent={<VictoryLabel dx={20} />} /> <VictoryCandlestick candleColors={{ positive: '#336d16', negative: '#ff0000' }} data={this.state.ordered_data} /> </VictoryChart>

傳遞給 VictoryCandlestick 的數據（代碼中稱為 this.state.ordered_data）的形狀如下：

    {Object {
    "close": 54.58,
    "high": 55.19,
    "low": 53.7,
    "open": 54.56,
    "x": "2021-02-03",
  },
  Object {
    "close": 54,
    "high": 54.87,
    "low": 52.71,
    "open": 52.865,
    "x": "2021-02-02",
  },
  Object {
    "close": 52.66,
    "high": 52.75,
    "low": 51.0718,
    "open": 51.2,
    "x": "2021-02-01",
  },}

包含所有這些代碼的 GitHub 存儲庫位於： Github 項目存儲庫，此屏幕的代碼位於/screens文件夾中的 StockScreen.js 文件中。

Answer 1

如下修改 Victory Charts 代碼可修復該問題：

 <VictoryChart theme={VictoryTheme.material} domainPadding={{ x: 25 }} scale={{ x: 'time' }} > <VictoryAxis scale='time' tickFormat={(t) => `${t}`} fixLabelOverlap style={{ tickLabels: { padding: 16, fontSize: 8 } }} /> <VictoryAxis dependentAxis axisLabelComponent={<VictoryLabel dx={20} />} /> <VictoryCandlestick candleColors={{ positive: '#336d16', negative: '#ff0000' }} data={this.state.ordered_data} /> </VictoryChart>

將fixLabelOverlap和style={{ tickLabels: { padding: 16, fontSize: 8 } }}道具添加到 VictoryAxis 組件專門解決了這個問題。