推荐使用:React Native响应式折线图库 —— react-native-responsive-linechart
import React from 'react';
import { View } from 'react-native';
import { LineChart } from 'react-native-responsive-linechart';
const data = [
{
// 数据点
x: 1, // x轴的数据
y: 2, // y轴的数据
label: 'A', // 标签
},
{
x: 2,
y: 3,
label: 'B',
},
// ...更多数据点
];
const chartConfig = {
// 图表配置
backgroundColor: '#ffffff', // 背景颜色
backgroundGradientFrom: '#ffffff', // 背景渐变开始颜色
backgroundGradientTo: '#ffffff', // 背景渐变结束颜色
decimalPlaces: 2, // 数字小数点位数
// ...更多配置
};
const chartStyle = {
// 图表样式
borderColor: '#dddddd', // 边框颜色
borderWidth: 1, // 边框宽度
// ...更多样式
};
export default function App() {
return (
<View style={{ flex: 1, margin: 10 }}>
<LineChart
data={data}
width={300}
height={200}
chartConfig={chartConfig}
style={chartStyle}
/>
</View>
);
}
这段代码演示了如何在React Native应用程序中使用react-native-responsive-linechart
库来渲染一个响应式折线图。数据和配置被定义为两个JavaScript对象,并传递给LineChart
组件的props。这个例子提供了如何设置图表的配置和样式,并在屏幕上渲染图表的基本方法。
评论已关闭