React Native Victory Chart控件Y轴值区间

fslejnso  于 2023-11-21  发布在  React
关注(0)|答案(1)|浏览(179)

我试图找出一种方法来改变Y轴值的区间。目前,它们分布在2000美元的区间,因为我有一个最小值为0美元,最大值为10500美元。由于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>

字符串

u2nhd7ah

u2nhd7ah1#

您可以手动指定要使用tickValues={tickValues}显示的刻度值,这将覆盖自动刻度值:
https://formidable.com/open-source/victory/docs/victory-axis/#tickvalues

相关问题