VictoryAxis绑定自定义日期数据无变化 始终显示1月1日问题求助

问题原因 #

VictoryAxis 单独配置 data 属性不会被用于自动计算坐标轴值域，默认x轴值域起始值为0，转换为日期类型即为1970年1月1日，所以所有刻度格式化后都会显示为1 jan。

解决步骤 #

1. 手动指定x轴值域
   给VictoryAxis添加domain属性，值设为你日期数据的最小、最大日期区间即可：

// 可以直接从现有date数组中提取值域
const xMin = Math.min(...date.map(item => item.x));
const xMax = Math.max(...date.map(item => item.x));

<VictoryAxis
  crossAxis={true}
  tickCount={12}
  domain={{x: [xMin, xMax]}}
  data={date}
  tickFormat={(x) => {
    return x.toLocaleString("vn-vn", {
      month: "short",
      day: "numeric"
    });
  }}
/>

2. 如果要精准显示你预设的所有日期刻度
   额外添加tickValues属性，直接指定刻度值为你date数组中的所有日期，避免Victory自动生成刻度：

<VictoryAxis
  crossAxis={true}
  tickValues={date.map(item => item.x)}
  domain={{x: [xMin, xMax]}}
  data={date}
  tickFormat={(x) => {
    return x.toLocaleString("vn-vn", {
      month: "short",
      day: "numeric"
    });
  }}
/>

3. 更适配双轴图的通用方案
   把所有绘图数据统一绑定到外层的VictoryChart组件的data属性上，Victory会自动计算所有关联坐标轴的合理值域，无需单独给VictoryAxis手动配置domain。

内容的提问来源于stack exchange，提问作者CODEforDREAM