在React Native Chart Kit中如何将Y轴值从数字更改为字符串

问题描述

我正在使用react-native-chart-kit进行显示，并试图更改y轴（请参见下面的屏幕截图）。我尝试用字符串数组填充yLabels属性。但这没有用。任何帮助将不胜感激！

解决方法

您可以为此使用formatYLabel道具（https://github.com/indiespirit/react-native-chart-kit#line-chart）

/*
 * Generator helper function that allows us to
 * cleanly return a label from an array
 * of labels for each segment of the y-axis
 */
function* yLabel() {
  yield* ['None','Low','Med','High'];
}

function App() {
  // Instantiate the iterator
  const yLabelIterator = yLabel();

  return (
    <View>
      <LineChart
        data={{
          labels: ['Mo','Tu','We','Fr','Sa','Su'],datasets: [
            {
              data: [3,2,1,4,4],},{
              data: [5,3,2],],}}
        segments={3}
        width={320}
        height={200}
        formatYLabel={() => yLabelIterator.next().value}
        chartConfig={{
          backgroundColor: 'white',backgroundGradientFrom: 'grey',backgroundGradientTo: 'grey',color: (opacity = 1) => `rgba(255,255,${opacity})`,labelColor: (opacity = 1) => `rgba(255,}}
      />
    </View>
  );
}

export default App;

如果要显示4个y轴标签，则需要将segments的{​​{1}}属性设置为3。

如果您想进一步了解Java LineChart，可以阅读以下内容：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*。