react-native-chart-f2

F2 charts for react-native

Usage no npm install needed!

<script type="module">
  import reactNativeChartF2 from 'https://cdn.skypack.dev/react-native-chart-f2';
</script>

README

react-native-chart-f2

F2 charts for react-native

install

1、

yarn add react-native-chart-f2 or npm i react-native-chart-f2

2、 copy node_moules/react-native-chart-f2/src/f2chart.html to android/app/src/main/assets/f2chart.html

simple demo example

usage

import Chart from "react-native-chart-f2";

// 参考 https://antv.alipay.com/zh-cn/f2/3.x/demo/line/basic.html
const initScript = data =>`
(function(){
    chart =  new F2.Chart({
        id: 'chart',
        pixelRatio: window.devicePixelRatio,
    });
    chart.source(${JSON.stringify(data)}, {
    value: {
    tickCount: 5,
    min: 0
    },
    date: {
    type: 'timeCat',
    range: [0, 1],
    tickCount: 3
    }
    });
    chart.tooltip({
    custom: true,
    showXTip: true,
    showYTip: true,
    snap: true,
    onChange: function(obj) {
        window.postMessage(stringify(obj))
    },
    crosshairsType: 'xy',
    crosshairsStyle: {
    lineDash: [2]
    }
    });
    chart.axis('date', {
    label: function label(text, index, total) {
    var textCfg = {};
    if (index === 0) {
        textCfg.textAlign = 'left';
    } else if (index === total - 1) {
        textCfg.textAlign = 'right';
    }
    return textCfg;
    }
    });
    chart.line().position('date*value');
    chart.render();
})();
`;

    ...
    render() {
        return (
            <View style={{ height: 350 }}>
              <Chart initScript={initScript(data)} />
            </View>
        )
    }
    ...
`

Props

Prop type Description Required
initScript string 初始化图表的 js 代码,参考 f2 的文档 yes
data Array f2 chart source no
onChange Function tooltip onchange no
webView ReactElement 渲染图表的 webview,可以使用 react-native-webview 代替,默认使用 react-natve 里面的 webview no

Notice

  • canvas的id 是 'chart',不是文档中的 'mountNode'
  • chart 已经在源码的 html 定义过了,在 initScript 中,并不需要定义 chart,直接给 chart 赋值即可
  • tooltip onchange 中 传输数据时用到的 stringify 也是在 html 定义好的,可以直接使用,用 JSON.stringify 会报错, 原因
  • 如果使用的是 react-native-webview,在 tooltip 中的 postMessage 应该为 window.ReactNativeWebView.postMessage