React Native 使用 react-native-chart-kit 实现图表

Fri_

已于 2024-08-08 17:10:37 修改

阅读量380

点赞数 1

文章标签： react native react.js javascript

于 2024-06-19 19:27:16 首次发布

本文链接：https://blog.csdn.net/weixin_51878863/article/details/139811209

版权

react-native-chart-kit

使用文档

GitHub - indiespirit/react-native-chart-kit： 📊React Native Chart Kit：折线图，贝塞尔折线图，进度环，条形图，饼图，贡献图（热图）

安装

yarn add react-native-chart-kit

使用

import React, {useEffect, useRef, useState} from 'react';
import {Text, View, StyleSheet} from 'react-native';
import {LineChart} from 'react-native-chart-kit';
import {Dimensions} from 'react-native';
const screenWidth = Dimensions.get('window').width * 0.84; // 获取图表可以显示的宽度
export const Demo = () => {
  const [chartData, setChartData] = useState({});
  const chartConfig = {
    backgroundGradientFrom: '#ffffff',
    backgroundGradientFromOpacity: 0,
    backgroundGradientTo: '#ffffff',
    backgroundGradientToOpacity: 0,
    color: (opacity = 0.5) => `rgba(51, 51, 51, ${opacity})`,
    strokeWidth: 2,
    barPercentage: 0.3,
  };
  const data: any = {
    labels: ['x1', 'x2', 'x3'],
    datasets: [
      {
        data: ['y1', 'y2', 'y3'],
        color: (opacity = 1) => `rgba(92, 186, 253, ${opacity})`, // optional
        strokeWidth: 2, // 折线宽度
      },
    ],
    legend: ['显示数值'], // 折线名
  };
  setChartData(data);

  return (
    <LineChart
      data={chartData}
      width={screenWidth}
      height={220}
      chartConfig={chartConfig}
      withVerticalLines={false} // 不显示垂直虚线
      withOuterLines={false} // 不显示外部虚线
      verticalLabelRotation={-60} // x轴的标签旋转-60°
    />
  );
};