React Native Chart Kit中如何在柱状图中导入Y标签？

Question

我想在Y轴上放置这些变量[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>

图表所以在这张图片中，我希望左边显示这些变量！

- thnikas

Answer 1

从查看BarChart的源代码来看，formatYLabel函数应该被声明为chartConfig内的一个属性，而不是像LineChart那样设置为prop。

还有一个问题需要注意：这个库根据你传入的数据数组推导出y轴的最小值和最大值。问题在于，即使你将标签设置为[80,90,100]，值也不一定对应。

换句话说：如果你的最小值标签与数据数组中的最小值不同，标签就不会完全匹配。

即使从数据数组中取最小值是默认设置，也有一个fromZero prop，你可以将其设置为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 本身也是范围的一部分。这给我们提供了一个值，表示为了根据我们传递的标签显示条形图的正确高度而应该纠正数据数组中的每个值。

这种方法假定您的最大值标签将大于数据数组中的最大值。

- 5eb

---

是的，它确实有效，非常感谢。但是柱状图的值是错误的！例如，星期一的值为80，但在数组中是85。 - thnikas

啊，是的，我刚刚复制了你的值和标签，但问题在于标签的数量与数据点的数量不相等，因此映射将出错。你的标签数组中缺少“Saturday”或“Sat”。顺便说一下，如果这解决了你的问题，你可以通过点击复选框接受答案。 - 5eb

它在图表中仍然显示与星期一相同的80。 - thnikas

你说得对。我已经意识到问题并更新了我的答案。 - 5eb

实际上，如果您的数据中没有100的最大值，它将违反规则，并且您的数据中的最大值将作为yAxisLabels中的100％。 ;( - Ahmed Bargady