{"id":20633905,"url":"https://github.com/aloneszjl/react-native-f2chart","last_synced_at":"2025-08-20T12:32:23.443Z","repository":{"id":41156311,"uuid":"172318244","full_name":"aloneszjl/react-native-f2chart","owner":"aloneszjl","description":"F2 charts for react-native","archived":false,"fork":false,"pushed_at":"2023-09-28T19:40:08.000Z","size":1458,"stargazers_count":74,"open_issues_count":29,"forks_count":39,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-12-11T22:42:18.253Z","etag":null,"topics":["chart","react-native","react-native-chart","react-native-f2"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aloneszjl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-24T09:20:56.000Z","updated_at":"2024-10-15T21:05:47.000Z","dependencies_parsed_at":"2024-06-21T15:21:09.282Z","dependency_job_id":"886252ee-eeed-4c50-9f87-fbed9bc1d4b6","html_url":"https://github.com/aloneszjl/react-native-f2chart","commit_stats":{"total_commits":15,"total_committers":1,"mean_commits":15.0,"dds":0.0,"last_synced_commit":"881a3396d67acae4cee41f7d180acad70c631c5a"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloneszjl%2Freact-native-f2chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloneszjl%2Freact-native-f2chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloneszjl%2Freact-native-f2chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloneszjl%2Freact-native-f2chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aloneszjl","download_url":"https://codeload.github.com/aloneszjl/react-native-f2chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230050926,"owners_count":18165150,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","react-native","react-native-chart","react-native-f2"],"created_at":"2024-11-16T14:22:51.106Z","updated_at":"2024-12-19T11:13:17.072Z","avatar_url":"https://github.com/aloneszjl.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-f2chart\n\n[F2](https://antv.alipay.com/zh-cn/f2/3.x/index.html) charts for react-native\n\n\u003cimg src=\"example/image/ios.jpg\" width=\"30%\" height=\"30%\"\u003e \u003cimg src=\"example/image/android.jpg\" width=\"28%\" height=\"28%\"\u003e\n\n\n\u003cimg src=\"example/image/pie-chart.jpg\" width=\"80%\" height=\"80%\"\u003e\n\n## install\n\n1、\n\n```\nyarn add react-native-f2chart or npm i react-native-f2chart\n```\n\n2、 copy `node_moules/react-native-f2chart/src/f2chart.html` to `android/app/src/main/assets/f2chart.html`\n\nsimple demo [example](example)\n\n## usage\n\n```js\nimport Chart from \"react-native-f2chart\";\n\n// 参考 https://antv.alipay.com/zh-cn/f2/3.x/demo/line/basic.html\nconst initScript = data =\u003e`\n(function(){\n    chart =  new F2.Chart({\n        id: 'chart',\n        pixelRatio: window.devicePixelRatio,\n    });\n    chart.source(${JSON.stringify(data)}, {\n    value: {\n    tickCount: 5,\n    min: 0\n    },\n    date: {\n    type: 'timeCat',\n    range: [0, 1],\n    tickCount: 3\n    }\n    });\n    chart.tooltip({\n    custom: true,\n    showXTip: true,\n    showYTip: true,\n    snap: true,\n    onChange: function(obj) {\n        window.postMessage(stringify(obj))\n    },\n    crosshairsType: 'xy',\n    crosshairsStyle: {\n    lineDash: [2]\n    }\n    });\n    chart.axis('date', {\n    label: function label(text, index, total) {\n    var textCfg = {};\n    if (index === 0) {\n        textCfg.textAlign = 'left';\n    } else if (index === total - 1) {\n        textCfg.textAlign = 'right';\n    }\n    return textCfg;\n    }\n    });\n    chart.line().position('date*value');\n    chart.render();\n})();\n`;\n\n    ...\n    render() {\n        return (\n            \u003cView style={{ height: 350 }}\u003e\n              \u003cChart initScript={initScript(data)} /\u003e\n            \u003c/View\u003e\n        )\n    }\n    ...\n`\n```\n\n## Props\n\n| Prop         | type          | Description                                                                                 | Required |\n| ------------ | ------------- | ------------------------------------------------------------------------------------------- | -------- |\n| `initScript` | string        | 初始化图表的 js 代码，参考 f2 的文档                                                        | `yes`    |\n| `data`       | Array\u003cObject\u003e | f2 chart source                                                                             | `no`     |\n| `onChange`   | Function      | tooltip onchange                                                                            | `no`     |\n| `webView`    | ReactElement  | 渲染图表的 webview，可以使用 react-native-webview 代替，默认使用 react-natve 里面的 webview | `no`     |\n\n## Notice\n\n- canvas的id 是 'chart'，不是文档中的 'mountNode'\n- chart 已经在源码的 html 定义过了，在 `initScript` 中，并不需要定义 chart，直接给 chart 赋值即可\n- tooltip onchange 中 传输数据时用到的 `stringify` 也是在 html 定义好的，可以直接使用，用 `JSON.stringify` 会报错, [原因](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value)\n- 如果使用的是 `react-native-webview`，在 tooltip 中的 `postMessage` 应该为 `window.ReactNativeWebView.postMessage`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faloneszjl%2Freact-native-f2chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faloneszjl%2Freact-native-f2chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faloneszjl%2Freact-native-f2chart/lists"}