在 barChart 中导入 Y 标签以响应本机图表工具包

Question

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

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 中声明为属性而不是像折线图的情况。

您需要注意的另一个问题是，该库根据您传入的数据数组导出最小和最大 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有什么区别（[=13时的起始值=] 设置为 true)。然后减去另一个 1 因为 0 本身也是范围的一部分。这为我们提供了一个值，表示数据数组中的每个值应该校正多少，以便根据我们传递的标签在正确的高度上显示条形。

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

在 barChart 中导入 Y 标签以响应本机图表工具包

import Y label in barChart at react native chart kit

bar-chart

react-native

react-native-chart-kit