Victory Chart自定义Y轴刻度间隔 解决异常值显示问题

当前Y轴最小值为$0、最大值为$10500，刻度间隔为$2000。由于$0是异常值，顶部$10000左右的数据差异无法清晰展示，需将Y轴刻度改为[0, 8000, 10000, 10500]。

相关数据（标注异常值） #

[
  {"x": "20", "y": 10195.53},
  {"x": "21", "y": 10181.26},
  {"x": "22", "y": 10219.15},
  {"x": "23", "y": 10182.75},
  {"x": "24", "y": 10248.56},
  {"x": "25","y": 10227.97},
  {"x": "26", "y": 10273.36},
  {"x": "27", "y": 0}, // 异常值
  {"x": "28", "y": 10343.5},
  {"x": "29", "y": 10224.12},
  {"x": "30", "y": 10260.72},
  {"x": "31", "y": 10399.57},
  {"x": "1", "y": 10330.53},
  {"x": "2", "y": 10315.44}
]

原代码 #

<VictoryChart 
  height={height} 
  width={Dimensions.get("window").width}             
  theme={VictoryTheme.material}               
  padding={{bottom: 30, right: 5, left: 5, top:5}}             
  maxDomain={{y: Math.max(...arr.map(({y}) => (y + 1)))}}             
  minDomain={{y: Math.min(...arr.map(({y}) => (y)))}}
>  
  <VictoryAxis 
    fixLabelOverlap 
    tickLabelComponent={<VictoryLabel />}               
    style={{                 
      grid: {stroke: '#eaeaea', strokeWidth: 1, strokeDasharray: 4},                 
      axis: {stroke: "#eaeaea", strokeWidth: 1},                 
      ticks: {stroke: "#a1a1a1"},                 
      tickLabels: {fill: "#a1a1a1", fontSize: 10},               
    }}
  />  
  <VictoryAxis 
    dependentAxis 
    offsetX={Dimensions.get("window").width} 
    fixLabelOverlap                
    tickFormat={(t) => `${toCurrencyFormat(t, 0)}`}               
    style={{                 
      grid: {stroke: '#eaeaea', strokeWidth: 1, strokeDasharray: 4},                 
      axis: {stroke: "transparent"},                 
      ticks: {stroke: "transparent"},                 
      tickLabels: {fill: "#a1a1a1", fontSize: 10},               
    }}
  />  
  <Defs>    
    <LinearGradient id="gradientStroke" x1="0" y1="0%" x2="0%" y2="100%">      
      <Stop offset="0%" stopColor={chartColor} stopOpacity={0.95}/>      
      <Stop offset="100%" stopColor="#fff4dc" stopOpacity={0}/>    
    </LinearGradient>  
  </Defs>  
  <VictoryArea    
    style={{      
      data: {stroke: chartColor, strokeWidth: 1, fill: 'url(#gradientStroke)', fillOpacity: 0.2},      
      parent: {border: "2px solid #ccc"}    
    }}    
    data={arr}  
  />
</VictoryChart>

解决方案 #

在Y轴（依赖轴dependentAxis）上添加ticks属性，直接指定自定义刻度值即可。同时可明确VictoryChart的Y轴范围，确保数据完整显示。

修改后的关键代码

<VictoryAxis 
  dependentAxis 
  offsetX={Dimensions.get("window").width} 
  fixLabelOverlap                
  tickFormat={(t) => `${toCurrencyFormat(t, 0)}`}
  // 指定自定义刻度
  ticks={[0, 8000, 10000, 10500]}               
  style={{                 
    grid: {stroke: '#eaeaea', strokeWidth: 1, strokeDasharray: 4},                 
    axis: {stroke: "transparent"},                 
    ticks: {stroke: "transparent"},                 
    tickLabels: {fill: "#a1a1a1", fontSize: 10},               
  }}
/>

若需严格锁定Y轴范围，可调整VictoryChart的maxDomain和minDomain：

maxDomain={{y: 10500}}             
minDomain={{y: 0}}

完整修改代码 #

<VictoryChart 
  height={height} 
  width={Dimensions.get("window").width}             
  theme={VictoryTheme.material}               
  padding={{bottom: 30, right: 5, left: 5, top:5}}             
  maxDomain={{y: 10500}}             
  minDomain={{y: 0}}
>  
  <VictoryAxis 
    fixLabelOverlap 
    tickLabelComponent={<VictoryLabel />}               
    style={{                 
      grid: {stroke: '#eaeaea', strokeWidth: 1, strokeDasharray: 4},                 
      axis: {stroke: "#eaeaea", strokeWidth: 1},                 
      ticks: {stroke: "#a1a1a1"},                 
      tickLabels: {fill: "#a1a1a1", fontSize: 10},               
    }}
  />  
  <VictoryAxis 
    dependentAxis 
    offsetX={Dimensions.get("window").width} 
    fixLabelOverlap                
    tickFormat={(t) => `${toCurrencyFormat(t, 0)}`}
    ticks={[0, 8000, 10000, 10500]}               
    style={{                 
      grid: {stroke: '#eaeaea', strokeWidth: 1, strokeDasharray: 4},                 
      axis: {stroke: "transparent"},                 
      ticks: {stroke: "transparent"},                 
      tickLabels: {fill: "#a1a1a1", fontSize: 10},               
    }}
  />  
  <Defs>    
    <LinearGradient id="gradientStroke" x1="0" y1="0%" x2="0%" y2="100%">      
      <Stop offset="0%" stopColor={chartColor} stopOpacity={0.95}/>      
      <Stop offset="100%" stopColor="#fff4dc" stopOpacity={0}/>    
    </LinearGradient>  
  </Defs>  
  <VictoryArea    
    style={{      
      data: {stroke: chartColor, strokeWidth: 1, fill: 'url(#gradientStroke)', fillOpacity: 0.2},      
      parent: {border: "2px solid #ccc"}    
    }}    
    data={arr}  
  />
</VictoryChart>

修改后Y轴将显示指定刻度，顶部数据差异会被放大展示，同时保留异常值0在图表中。

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