react-native 使用 F2实现折线图

最新推荐文章于 2023-01-10 11:35:43 发布

w候人兮猗

最新推荐文章于 2023-01-10 11:35:43 发布

阅读量1.5k

点赞数

分类专栏：前端 react react-native 文章标签： react native

本文链接：https://blog.csdn.net/qq_33551792/article/details/104825052

版权

本文介绍了如何在react-native项目中利用阿里云的F2库来实现折线图的绘制。首先，通过react-native-webview加载本地F2chart.html文件。接着，确保文件与组件在同一目录，并在项目中引入F2。然后，根据F2的官方文档进行配置。最后，实际应用到项目中，实现折线图的功能。

摘要由CSDN通过智能技术生成

前言

最近工作入坑了react-native,有实现折线图的需求,使用了阿里的antv/f2可视化库。

方案介绍：

react-native-webview
antv/f2

大概思路：
使用webview加载本地html文件，通过injectJavaScript加载js脚本

步骤

新建f2chart.html,文件较大，文件地址:f2chart.html

在ios中, 将此文件与组件放在同一目录，在andirod中，手动将次文件放置在android/app/src/main/assets/f2chart.html ,如果没有该文件夹，手动创建一个。

新建f2Chart组件

import React, {
    PureComponent, createRef } from 'react';
import {
    StyleSheet, Platform } from 'react-native';
import {
    WebView as RNWebView } from 'react-native-webview';
import renderChart, {
    changeChartData } from './renderChart';

const source = Platform.select({
   
  // eslint-disable-next-line global-require
  ios: require('./f2chart.html'),
  android: {
    uri: 'file:///android_asset/f2chart.html' },
});

export default class Chart extends PureComponent {
   

  constructor(props) {
   
    super(props);
    this.chart = createRef();