我试图找出一种方法来改变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>
字符串
1条答案
按热度按时间u2nhd7ah1#
您可以手动指定要使用
tickValues={tickValues}
显示的刻度值,这将覆盖自动刻度值:https://formidable.com/open-source/victory/docs/victory-axis/#tickvalues