Я использую react-native-chart-kit для отображения и пытаюсь чтобы изменить ось Y (см. снимок экрана ниже). Я попытался заполнить свойство yLabels массивом строк. Но это не сработало. Любая помощь будет оценена по достоинству!
Как изменить значения оси Y с чисел на строки в наборе реагирующих нативных диаграмм
Ответы (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