Как изменить значения оси Y с чисел на строки в наборе реагирующих нативных диаграмм

Я использую react-native-chart-kit для отображения и пытаюсь чтобы изменить ось Y (см. снимок экрана ниже). Я попытался заполнить свойство yLabels массивом строк. Но это не сработало. Любая помощь будет оценена по достоинству!

введите здесь описание изображения


person Feni Herbert    schedule 15.09.2020    source источник


Ответы (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, вам нужно установить segments опору LineChart на 3.

Если вы хотите узнать больше о yield в Javascript, вы можете прочитать это: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*.

person Bas van der Linden    schedule 24.09.2020