在本地图表工具包中的barChart中导入Y标签 [英] import Y label in barChart at react native chart kit

问题描述

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

  const数据= {标签:["Sun"，"Mon"，"Tue"，"Wed"，"Thu"，"Fri"]，数据集:[{数据:[89,85,96,97,94,91,88]}]};const graphScreen =()=> {const screenWidth = Dimensions.get("window").width;返回(<查看><条形图样式= {{marginVertical:8，borderRadius:16}}chartConfig = {{backgroundColor:#e26a00"，backgroundGradientFrom:#fb8c00"，backgroundGradientTo:#ffa726"，decimalPlaces:0，//可选，默认为2dp颜色:(不透明度= 3)=>`rgba(200，255，255，$ {opacity})`，labelColor:(不透明度= 1)=>`rgba(255，255，255，$ {opacity})`，风格: {borderRadius:30}，数据:data.datasets，propsForDots:{r:"6"，strokeWidth:"2"，笔画:#ffa726"}}}细分= {3}宽度= {screenWidth}高度= {220}formatYLabel = {()=>yLabelIterator.next().value}verticalLabelRotation = {0}/></View> 

---

因此，从每个数据点减去 minValue-1 的想法是说:我的最小值标签 80 和 0 (将 fromZero 设置为 true 时的起始值).然后减去另一个 1 ，因为 0 本身也是该范围的一部分.这给了我们一个值，该值表示应该对数据数组中的每个值进行多少校正，以便根据我们通过的标签将条形图显示在正确的高度上.

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

I want to put in Ylabels these variables [80,90,100] but the graph starts from the min variable i put in the array I found a way to do it in line chart but it does not work on 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>

graphSo in the picture i want in the left side to be these variables!

解决方案

From looking at the source code for the BarChart it seems the formatYLabel function should be declared as a property inside chartConfig instead of being set as a prop, as is the case with the LineChart.

Another problem you need to be aware of is that this library derives the minimum and maximum y-axis value based on the data array you pass in. The problem with this is that even though you might set your labels to be [80, 90, 100], the values won't necessarily correspond.

Said in another way: If your minimum value label is a different value from the minimum value in your data array the labels won't match up entirely.

Even though taking the minimum value from the data array is the default, there is a fromZero prop you can set to true which makes the y-axis start value 0.

We can take advantage of this by doing something like this:

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;

I've also changed the amount of segments from 3 to 2. The segments are the spaces between the labels, so if you want 3 labels you want 2 segments.

Result:

---

So the idea of subtracting minValue - 1 from each datapoint is to say: What is the difference between my minimum value label 80 and 0 (The start value when fromZero is set to true). Then subtract another 1 since 0 itself is also part of the range. This gives us a value that signifies how much each value in the data array should be corrected in order to display the bars on the correct height according to the labels we've passed.

This approach assumes your max value label will be more than the max value in the data array.

这篇关于在本地图表工具包中的barChart中导入Y标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！