Из исходного кода BarChart кажется, что функция formatYLabel должна быть объявлена как свойство внутри chartConfig
, а не задана как реквизит, как в случае с LineChart.
Еще одна проблема, о которой вам нужно знать, заключается в том, что эта библиотека получает минимальное и максимальное значение оси Y на основе массива данных, который вы передаете. Проблема в том, что даже если вы можете установить свои метки как [80, 90, 100]
, значения выиграл Не обязательно соответствовать.
Другими словами: если ваша метка минимального значения отличается от минимального значения в вашем массиве данных, метки не будут полностью совпадать.
Несмотря на то, что по умолчанию используется минимальное значение из массива данных, есть свойство fromZero
, которое вы можете установить на true
, что делает начальное значение оси Y 0
.
Мы можем воспользоваться этим, сделав что-то вроде этого:
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;
Я также изменил количество сегментов с 3
на 2
. Сегменты — это промежутки между метками, поэтому, если вы хотите 3 метки, вам нужны 2 сегмента.
Результат:
![витрина](https://i.stack.imgur.com/iq8cV.png)
Таким образом, идея вычитания minValue - 1
из каждой точки данных состоит в том, чтобы сказать: в чем разница между моей меткой минимального значения 80
и 0
(начальное значение, когда fromZero
установлено на true
). Затем вычтите еще 1
, поскольку само 0
также является частью диапазона. Это дает нам значение, которое показывает, насколько каждое значение в массиве данных должно быть скорректировано, чтобы столбцы отображались на правильной высоте в соответствии с переданными нами метками.
Этот подход предполагает, что ваша метка максимального значения будет больше, чем максимальное значение в массиве данных.
person
Bas van der Linden
schedule
22.11.2020