react-native 使用 F2實現折線圖

前言

最近工作入坑了react-native,有實現折線圖的需求,使用了阿里的antv/f2可視化庫。

方案介紹：

• react-native-webview
• antv/f2

大概思路：
使用webview加載本地html文件，通過injectJavaScript加載js腳本

步驟

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

在ios中, 將此文件與組件放在同一目錄，在andirod中，手動將次文件放置在android/app/src/main/assets/f2chart.html ,如果沒有該文件夾，手動創建一個。

2. 新建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();
  }

  // eslint-disable-next-line react/no-deprecated
  componentWillReceiveProps(nextProps) {
    const { data } = this.props;
    if (data !== nextProps.data) {
      this.reload();
      this.chart.current.injectJavaScript(changeChartData(nextProps));
    }
  }

  update = data => {};

  onMessage = event => {
    const {
      nativeEvent: { data },
    } = event;
    const { onChange } = this.props;
    const tooltip = JSON.parse(data);
    onChange(tooltip);
  };

  reload = () => {
    this.chart.current.reload();
  };

  onLoadEnd = () => {
    setTimeout(() => {
      this.chart.current.injectJavaScript(renderChart(this.props));
    }, 10);
  };

  render() {
    const { data, ...props } = this.props;
    return (
      <RNWebView
        scrollEnabled={false}
        javaScriptEnabled
        ref={this.chart}
        style={styles.webView}
        injectedJavaScript={renderChart(this.props)}
        source={source}
        onLoadEnd={this.onLoadEnd}
        originWhitelist={['*']}
        onMessage={this.onMessage}
        {...props}
      />
    );
  }
}

const styles = StyleSheet.create({
  webView: {
    flex: 1,
    backgroundColor: 'transparent',
  },
});

這裏需要注意的是，在最新版本的react-native中已經將WebView脫離出來了，所以需要安裝react-native-webview

yarn add react-native-webview -S

3.新建renderChart.js

export default function renderChart(props) {
  const { data = [] } = props;
  const chartData = data.map(c => {
          return {
            ...c,
            date: formatChartDate(c.date), // 將時間處理成 2020-03-12 12:00:00 格式
          };
        })
      

  const lastData = chartData[chartData.length - 1];

  const script = `
  (function(){
    const chart = new F2.Chart({
      id: 'chart',
      pixelRatio: window.devicePixelRatio,
      padding: 'auto',
    });
    chart.source(${JSON.stringify(chartData)}, {
      value: {
        tickCount: 5,
        min: 0,
        ticks: [0, 25, 50, 75, 100],
        sortable:false
      },
      date: {
        type: 'timeCat',
        range: [0, 1],
        tickCount: 3,
      }
    });
    chart.tooltip({
      showCrosshairs:true,
      crosshairsStyle: {
        lineDash: [2]
      },
      alwaysShow:true,
      showItemMarker: false,
      background: {
        radius: 2,
        fill: 'rgb(229,35,97)',
        padding: [ 2, 6 ]
      },
      tooltipMarkerStyle: {
        fill: '#5B98FF', // 設置 tooltipMarker 的樣式
        radius: 4,
        lineWidth: 2,
        stroke: '#d9e5fc',
      },
      onShow: function(ev) {
        const items = ev.items;
        const value = items[0].value;
        items[0].name = null;
        items[0].value = value>0?'+'+value + '元' : '0.00';
      }
    });
    chart.axis('value', {
      label: function label(text, index, total) {
        const textCfg = {
          text
        };
        return textCfg;
      }
    }); 
    chart.axis('date', {
      label: function label(text, index, total) {
        const textArr = text.split('-');
        const month = textArr[1];
        const textCfg = {
          color:'#888B9C',
          fontSize:'10',
          text:textArr[0]+'年'+parseInt(month)+'月'
        };
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index === total - 1) {
          textCfg.textAlign = 'right';
        }
        return textCfg;
      }
    });
    chart.line({
      sortable: false
    }).position('date*value').shape('smooth')
    chart.area({
      sortable: false
    }).position('date*value').shape('smooth')
    chart.render();

    const item = ${JSON.stringify(lastData)}
    const point = chart.getPosition(item); 
    chart.showTooltip(point); 
  })();
  `;
  return script;
}

具體配置可查詢官方APIhttps://f2.antv.vision/zh/docs/api/f2

4.使用

import F2LineChart from 'F2LineChart'

render(){
    return(
        <View>
            <F2LineChart data=[] />
        </View>
    )
}

關於

• 文章首發於react-native 使用 F2實現折線圖