react-native - 在 react 原生图表工具包中导入 barChart 中的 Y 标签

Question

我想在 Ylabels 中放入这些变量 [80,90,100] 但图表从我放入数组的最小变量开始

const data = {      
  labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri"],
  datasets: [
    {
     data: [89,85,96,97,94,91,88]
    }
  ]
};

 

  
const graphScreen=()=>{    
  const screenWidth = Dimensions.get("window").width;
return(
  
 <View >
    <BarChart
    style={{
    marginVertical: 8,
    borderRadius: 16
  }}
  
  
  

  chartConfig={{
    
    backgroundColor: "#e26a00",
    backgroundGradientFrom: "#fb8c00",
    backgroundGradientTo: "#ffa726",
    decimalPlaces: 0, // optional, defaults to 2dp
    color: (opacity = 3) => `rgba(200, 255, 255, ${opacity})`,
    labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
    style: {
      borderRadius: 30
    },
    data: data.datasets,
    propsForDots: {
      r: "6",
      strokeWidth: "2",
      stroke: "#ffa726"
    }
  }}
  
  segments={3}
  width={screenWidth}
  height={220}
  formatYLabel={() => yLabelIterator.next().value}
  verticalLabelRotation={0}
  
/>

</View>

graph所以在图片中我希望左侧是这些变量!

Answer 1

从查看 BarChart 的源代码似乎 formatYLabel 函数应该声明为 chartConfig 中的一个属性而不是像 LineChart 那样被设置为 Prop 。
您需要注意的另一个问题是该库根据您传入的数据数组推导出最小和最大 y 轴值。问题在于，即使您可能将标签设置为 [80, 90, 100] ，这些值不一定对应。
换句话说:如果您的最小值标签与数据数组中的最小值不同，则标签将不会完全匹配。
即使从数据数组中取最小值是默认值，
有一个fromZero你可以设置为 true这使得 y 轴起始值 0 .
我们可以通过做这样的事情来利用这一点:

const minValue = 80;

function* yLabel() {
  yield* [minValue, 90, 100];
}

const datapoints = [89, 88, 96, 97, 94, 91, 88].map(
  (datapoint) => datapoint - minValue - 1,
);

const data = {
  labels: ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  datasets: [
    {
      data: datapoints,
    },
  ],
};

const App = () => {
  const screenWidth = Dimensions.get('window').width;
  const yLabelIterator = yLabel();

  return (
    <View>
      <BarChart
        style={{
          marginVertical: 8,
          borderRadius: 16,
        }}
        data={data}
        segments={2}
        width={screenWidth}
        height={220}
        verticalLabelRotation={0}
        fromZero={true}
        chartConfig={{
          backgroundColor: '#e26a00',
          backgroundGradientFrom: '#fb8c00',
          backgroundGradientTo: '#ffa726',
          decimalPlaces: 0, // optional, defaults to 2dp
          color: (opacity = 3) => `rgba(200, 255, 255, ${opacity})`,
          labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          style: {
            borderRadius: 30,
          },
          formatYLabel: () => yLabelIterator.next().value,
          data: data.datasets,
          propsForDots: {
            r: '6',
            strokeWidth: '2',
            stroke: '#ffa726',
          },
        }}
      />
    </View>
  );
};

export default App;

我还更改了 3 中的段数至 2 .段是标签之间的空间，所以如果你想要 3 个标签，你需要 2 个段。
结果:


所以减法的想法minValue - 1从每个数据点是说:我的最小值标签 80 之间有什么区别？和 0 (当 fromZero 设置为 true 时的起始值)。然后再减去一个 1自 0本身也是范围的一部分。这为我们提供了一个值，该值表示数据数组中的每个值应该被校正多少，以便根据我们传递的标签在正确的高度上显示条形。
这种方法假设您的最大值标签将大于数据数组中的最大值。