时间戳

首页 > 解决方案 > 在反应原生图表工具包中在 barChart 中导入 Y 标签

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

问题描述

我想将这些变量放入 Ylabels [80,90,100] 但图表从我放入数组中的最小变量开始我找到了一种在折线图中执行此操作的方法，但它不适用于 BarChart

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所以在图片中我希望左边是这些变量！

标签： react-nativebar-chartreact-native-chart-kit

解决方案

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

您需要注意的另一个问题是，该库根据您传入的数据数组导出最小和最大 y 轴值。这样做的问题是，即使您可能将标签设置为[80, 90, 100]，这些值也不会t 必然对应。

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

尽管从数据数组中获取最小值是默认值，但fromZero您可以设置一个道具来设置truey 轴起始值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有什么区别。然后减去另一个，因为它本身也是范围的一部分。这为我们提供了一个值，该值表示数据数组中的每个值应该被修正多少，以便根据我们传递的标签在正确的高度上显示条形图。800fromZerotrue10

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

推荐阅读