使用库react原生图表套件,但字体不适用于此库
下面的代码用于折线图
使用fontFamily"Montserrat Regular";
<LineChart
data={{
labels: [`10 Jun`,'11 Jun','12 Jun','13 Jun','14 Jun'],
datasets: [{data: [5, 10, 7, 20, 8, 30]}],
// legend: ['Time spent on your programs'],
}}
width={Dimensions.get('window').width / 1.1} // from react-native
height={200}
yAxisSuffix="h"
withDots={false}
withShadow={false}
withHorizontalLines={false}
chartConfig={{
fontFamily: "Montserrat-Regular",
backgroundColor: 'black',
backgroundGradientFrom: colors.textColor,
backgroundGradientTo: colors.textColor,
color: (opacity = 1) => `rgba(255, 255, 255, 0.5)`,
labelColor: (opacity = 1) => `rgba(255, 255, 255,0.4)`,
decimalPlaces: 0,
propsForDots: {
r: '6',
strokeWidth: '2',
stroke: '#fffff',
},
}}
style={{
marginVertical: 8,
marginTop:30,
borderRadius: 16,
fontFamily:"Montserrat-Regular"
}}
/>
使用道具解决问题
propsForLabels:{fontFamily:"Montserrat Regular"}
<LineChart
data={{
labels: [`10 Jun`,'11 Jun','12 Jun','13 Jun','14 Jun'],
datasets: [{data: [5, 10, 7, 20, 8, 30]}],
// legend: ['Time spent on your programs'],
}}
width={Dimensions.get('window').width / 1.1} // from react-native
height={200}
yAxisSuffix="h"
withDots={false}
withShadow={false}
withHorizontalLines={false}
chartConfig={{
**propsForLabels:{fontFamily:"Montserrat-Regular"}**
backgroundColor: 'black',
backgroundGradientFrom: colors.textColor,
backgroundGradientTo: colors.textColor,
color: (opacity = 1) => `rgba(255, 255, 255, 0.5)`,
labelColor: (opacity = 1) => `rgba(255, 255,255,0.4)`,
decimalPlaces: 0,
propsForDots: {
r: '6',
strokeWidth: '2',
stroke: '#fffff',
},
}}
style={{
marginVertical: 8,
marginTop:30,
borderRadius: 16,
fontFamily:"Montserrat-Regular"
}}
/>