如何在反应原生图表套件中将 Y 轴值从数字更改为字符串答案

【问题标题】：How to change the Y-axis values from numbers to strings in react native chart kit如何在反应原生图表套件中将 Y 轴值从数字更改为字符串
【发布时间】：2020-09-15 15:44:15
【问题描述】：

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

【问题讨论】：

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

【解决方案1】：

您可以为此使用 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, 1, 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, 255, ${opacity})`,
          labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
        }}
      />
    </View>
  );
}

export default App;

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

如果您想了解更多关于 Javascript 中的 yield 的信息，您可以阅读以下内容：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*。

【讨论】：