胜利本机：图表未显示Y轴的第一个标签

问题描述

Y轴未显示0值

 <VictoryChart
                padding={{left: 75,top: 50,right: 50,bottom: 50}}
                width={Dimensions.get('window').width}
                theme={VictoryTheme.material}>
                <VictoryBar
                  style={{
                    data: {fill: colors.barColor,border: 0},axis: {stroke: 'transparent'},ticks: {stroke: 'transparent'},tickLabels: {fill: 'transparent'},}}
                  data={profitFlowResponse.data.values}
                  x="displayName"
                  y="income"
                />
                <VictoryAxis
                  dependentAxis
                  tickValues={Math.max(
                    profitFlowResponse.data.values.map((item) => item.income),)}
                  domain={{
                    y: [
                      0,Math.ceil(
                        Math.max(
                          ...profitFlowResponse.data.values.map(
                            (item) => item.income,),],}}
                  tickFormat={(t) => `${currency.symbol}${nFormatter(t,2)}`}
                  style={{
                    grid: {stroke: colors.invoiceDivider,strokeWidth: 0.5},axis: {stroke: 'none'},}}
                />
                <VictoryAxis
                  fixLabeloverlap={true}
                  style={{
                    tickLabels: {
                      angle: -45,padding: moderateScale(16),},grid: {strokeWidth: 0},}}
                  tickValues={profitFlowResponse.data.values.map(
                    (item) => item.displayName,)}
                />
              </VictoryChart>

解决方法

再次检查 document 后，我发现：

注意：通常在零处交叉的轴不会在零处显示刻度或刻度标签。要更改此行为，请将 crossAxis 属性设置为 false。

因此您可以更新您的代码，例如：

...
<VictoryAxis dependentAxis crossAxis={false}/>
...

结果：