{"id":13671460,"url":"https://github.com/hustcc/g2-for-react","last_synced_at":"2025-03-19T14:30:37.276Z","repository":{"id":57243637,"uuid":"145969155","full_name":"hustcc/g2-for-react","owner":"hustcc","description":"📈g2 在 React 上的简单组件包装。React component wrapper of @antvis g2.","archived":false,"fork":false,"pushed_at":"2018-08-31T11:15:24.000Z","size":2533,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T19:06:52.498Z","etag":null,"topics":["antv","antvis","g2","g2-for-react","react-component","react-g2"],"latest_commit_sha":null,"homepage":"https://git.hust.cc/g2-for-react","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hustcc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-24T09:06:05.000Z","updated_at":"2022-07-08T10:05:32.000Z","dependencies_parsed_at":"2022-09-16T06:20:25.180Z","dependency_job_id":null,"html_url":"https://github.com/hustcc/g2-for-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fg2-for-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fg2-for-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fg2-for-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fg2-for-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hustcc","download_url":"https://codeload.github.com/hustcc/g2-for-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243997041,"owners_count":20380980,"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":["antv","antvis","g2","g2-for-react","react-component","react-g2"],"created_at":"2024-08-02T09:01:10.263Z","updated_at":"2025-03-19T14:30:37.015Z","avatar_url":"https://github.com/hustcc.png","language":"JavaScript","readme":"# g2-for-react\n\n\u003e 一个简单的 g2 包装，便于在 React 上使用。\n\u003e\n\u003e A simple react component wrapper for [antv/g2](https://github.com/antvis/g2). Demo click [here](https://git.hust.cc/g2-for-react).\n\n[![npm](https://img.shields.io/npm/v/g2-for-react.svg)](https://www.npmjs.com/package/g2-for-react)\n[![npm](https://img.shields.io/npm/dm/g2-for-react.svg)](https://www.npmjs.com/package/g2-for-react)\n\n\n\n## Install\n\n\u003e npm i --save g2-for-react\n\n\n\n## Usage\n\n```jsx\nimport GFR from 'g2-for-react';\n\nconst creator = chart =\u003e {\n  chart.tooltip({\n    crosshairs: {\n      type: 'line'\n    }\n  });\n  chart.axis('temperature', {\n    label: {\n      formatter: function formatter(val) {\n        return val + '°C';\n      }\n    }\n  });\n  chart.line().position('month*temperature').color('city');\n  chart.point().position('month*temperature').color('city').size(4).shape('circle').style({\n    stroke: '#fff',\n    lineWidth: 1\n  });\n};\n\nconst onReady = chart =\u003e {\n  console.log('Ready', chart);\n};\n\n\nReactDOM.render(\n  \u003cGFR\n    data={this.state.data}\n    creator={creator}\n    onReady={onReady}\n  /\u003e,\n  document.getElementById('root'),\n);\n```\n\nFull demo in `Example`.\n\n\n\n## Component Props\n\n - `className`: class of dom container.\n - `data`: G2 chart data.\n - `creator`: create function for G2 chart.\n - `onReady`: call after rendered.\n\nOther props `padding`, `background`, `plotBackground`, `forceFit`, `animate`, `pixelRatio`, `theme`, `renderer` are the parameters of `G2.Chart`.\n\nDocument of g2 [here](https://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_Chart).\n\n\n\n## Feature\n\n - Basically consistent with the original usage.\n - Adaptive width and height.\n - Customization ability.\n\n\n\n# License\n\nISC@[hustcc](https://github.com/hustcc).\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhustcc%2Fg2-for-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhustcc%2Fg2-for-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhustcc%2Fg2-for-react/lists"}