{"_id":"@ant-design/charts-yfd","_rev":"30-2cedc264f5b5832e74af044db9973c2e","name":"@ant-design/charts-yfd","dist-tags":{"latest":"1.0.0-beta.1"},"versions":{"1.0.0-beta.1":{"name":"@ant-design/charts-yfd","version":"1.0.0-beta.1","_id":"@ant-design/charts-yfd@1.0.0-beta.1","maintainers":[{"name":"carrietan","email":"12mytan@gmail.com"},{"name":"mmmary","email":"1084406753@qq.com"},{"name":"arvinxx","email":"arvinx@foxmail.com"},{"name":"duxiaodong","email":"duxiaodong@darlin.me"},{"name":"yutingzhao1991","email":"yutingzhao1991@sina.com"},{"name":"wynterding","email":"wynterding@gmail.com"},{"name":"esora","email":"tygyh2012@gmail.com"},{"name":"kn9117","email":"1175863618@qq.com"},{"name":"ycjcl868","email":"45808948@qq.com"},{"name":"dahong","email":"darryshaw@gmail.com"},{"name":"gongzhen","email":"gongzhen1027@hotmail.com"},{"name":"vagusx","email":"onlylae@sina.com"},{"name":"chenshuai2144","email":"wasd2144@hotmail.com"},{"name":"zombiej","email":"smith3816@gmail.com"},{"name":"bang88","email":"sqibang@gmail.com"},{"name":"tangjinzhou","email":"415800467@qq.com"},{"name":"wendzhue","email":"wendellhu95@gmail.com"},{"name":"vthinkxie","email":"vthinkxie@gmail.com"},{"name":"wilsoncook","email":"jackzcs@gmail.com"},{"name":"yesmeck","email":"yesmeck@gmail.com"},{"name":"afc163","email":"afc163@gmail.com"},{"name":"heskey","email":"hezhiyu233@foxmail.com"}],"contributors":[{"name":"福晋"},{"name":"辟起"},{"name":"愚道"},{"name":"期贤"},{"name":"绯一"},{"name":"聚则"},{"name":"十吾"}],"homepage":"https://github.com/ant-design/ant-design-charts#readme","bugs":{"url":"https://github.com/ant-design/ant-design-charts/issues"},"np":{"yarn":false,"contents":"dist"},"dist":{"shasum":"1b0b18bc77816bfd88cbb1588fc9d3d9e0d455dd","tarball":"https://registry.npmjs.org/@ant-design/charts-yfd/-/charts-yfd-1.0.0-beta.1.tgz","fileCount":155,"integrity":"sha512-R9P7nkYbT0Ym/FosMa34ycWDAKo5WA2ixPEy3gFJ0gqDdm6++arh840oVmBXjNcdGinEmGa8iSA0PvlKskZeAQ==","signatures":[{"sig":"MEUCIQCmj4HZjep2nLR4DJ6Dvff6YX/pBPrE+fba1VKbYZVq4AIgahzmOhHQPFCmtL67aO39jiNzNgqqOBUEZqB6gvBytqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":294937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZ08/CRA9TVsSAnZWagAAb/0P/1RjX86PcWS/r0LQWPNV\ngGYeXlSdI2v1X8BmKwiKu7BO4jmc2MxVo4AAIx5vfDQ/K8Pbm9F5RX+V/SnP\nNT/78GSN0X8EMxjSeeGhlp/YbE00SW0lq2vithKV8pYfgkAvuuE3LLhBLmx9\na6jBdSwb1iDWAeVSw8twBy6cm3a+SbRavByvH8o9+HLxtNdUJpVvfHFOHA1h\nrlOoZxQkA2m6fIJdGRNNyedqlOIM+ECAsAH0RQiYHBKytQ286ZMFMzGfOgIv\njccIIoHSz7bFi4UmEETSCT6WG3l1nQABJQCCH+F5QdnyVQjUA5HPnasQql8Z\n19+M+RPuvB9muFwq4CTD6yjZrgqAUQKrB3KoerOsSsOdAiflRY0YqhdnK69L\n/l7xN2yLRlKLibaXc+4Fv0WZw6ScvV4+H/ig0tsqpm/aWmW/rN2TozZmeHwA\nkvdlBBrcBIgg46K9Of6XnWkzQMtvP2nYQR3pHvvujAHEhlF9VC4q3AXZGTNn\n4pFwYABcrY/1lc4rNkwbhqHzgEShKE04Ti3rmqbsLLOfFkzH+a5ZYn//73zm\nKklnDr6D+Jhmf+2fRbxvF2gZnDUv3JDePeFrz6lpVTc4flVu8zR9JuyE/LO+\n+sKoQG6dOkdT8jrQNPbNU5TPoe8sWnF1nyZyUTsT0V2UtVdtK0w2V0oI4tJR\n9g6t\r\n=GJ2M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"es/index.d.ts","module":"es/index.js","gitHead":"8b945ccf8c360d538bed0eb2237e2ace0cac3c7b","scripts":{"ci":"npm run build && npm run test:coverage","dev":"dumi dev","pub":"npm run build && np","test":"umi-test","build":"father-build","entry":"node ./scripts/entry.js","start":"npm run dev","deploy":"gh-pages -d dist","addChart":"node ./scripts/addChart.js","mockTest":"node ./scripts/mockTest.js","prettier":"prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'","docs:build":"dumi build","test:coverage":"umi-test --coverage"},"_npmUser":{"name":"kn9117","email":"1175863618@qq.com"},"repository":{"url":"git+https://github.com/ant-design/ant-design-charts.git","type":"git"},"_npmVersion":"6.14.7","description":"React translate g2plot","directories":{},"_nodeVersion":"14.8.0","dependencies":{"@antv/g6":"^3.6.0","@antv/util":"^2.0.9","@antv/g2plot":"^2.0.0-beta.2","react-content-loader":"^5.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"np":"*","ejs":"^3.0.2","dumi":"^1.1.0-beta.18","enzyme":"^3.11.0","loadsh":"^0.0.4","esprima":"^4.0.1","shelljs":"^0.8.3","gh-pages":"^3.0.0","prettier":"^2.0.2","escodegen":"^2.0.0","estraverse":"^5.1.0","typescript":"^3.7.4","@types/node":"^14.0.10","@umijs/test":"^3.0.16","father-build":"^1.17.2","whatwg-fetch":"^3.0.0","@types/enzyme":"^3.10.5","@umijs/fabric":"^2.0.7","enzyme-to-json":"^3.4.4","jest-canvas-mock":"^2.2.0","@types/webpack-env":"^1.14.1","dumi-theme-default":"^1.0.0-beta.5","@umijs/preset-react":"^1.4.8","@testing-library/react":"^10.0.2","enzyme-adapter-react-16":"^1.15.2","@testing-library/jest-dom":"^5.5.0"},"peerDependencies":{"react":"^16.8.4","react-dom":"^16.8.4"},"_npmOperationalInternal":{"tmp":"tmp/charts-yfd_1.0.0-beta.1_1600606014381_0.7838446987416496","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-09-20T12:46:54.137Z","modified":"2026-04-02T03:57:37.653Z","1.0.0-beta.1":"2020-09-20T12:46:54.550Z"},"bugs":{"url":"https://github.com/ant-design/ant-design-charts/issues"},"homepage":"https://github.com/ant-design/ant-design-charts#readme","repository":{"url":"git+https://github.com/ant-design/ant-design-charts.git","type":"git"},"description":"React translate g2plot","contributors":[{"name":"福晋"},{"name":"辟起"},{"name":"愚道"},{"name":"期贤"},{"name":"绯一"},{"name":"聚则"},{"name":"十吾"}],"maintainers":[{"email":"afc163@gmail.com","name":"afc163"},{"email":"smith3816@gmail.com","name":"zombiej"},{"email":"wasd2144@hotmail.com","name":"chenshuai2144"},{"email":"arvinx@foxmail.com","name":"arvinxx"},{"email":"1075746765@qq.com","name":"madccc"},{"email":"zhuyuxin0627@gmail.com","name":"banxuan"},{"email":"1175863618@qq.com","name":"kn9117"},{"email":"subairui@icloud.com","name":"pearmini"}],"readme":"# @ant-design/charts\n\nA React chart library, based on [G2Plot](https://antv-g2plot.gitee.io/zh)\n\n<div align=\"center\">\n\n![npm](https://img.shields.io/npm/dm/@ant-design/charts) ![npm](https://img.shields.io/npm/v/@ant-design/charts) [![GitHub stars](https://img.shields.io/github/stars/ant-design/ant-design-charts)](https://github.com/ant-design/ant-design-charts/stargazers) ![Test CI](https://github.com/ant-design/ant-design-charts/workflows/Test%20CI/badge.svg)\n\n</div>\n\n<div align=\"center\">\n<img src=\"https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*sXqrRrEwFRQAAAAAAAAAAABkARQnAQ\" width=\"800\"/>\n</div>\n\n## Features\n\n- Easy to use\n- TypeScript\n- Pretty & Lightweight\n- Responsive\n- Storytelling\n\n## Installation\n\n### npm\n\n```bash | pure\n$ npm install @ant-design/charts\n```\n\n## Usage\n\n### ClassComponent\n\n```tsx | pure\nimport React, { Component, createRef } from 'react';\nimport { Line } from '@ant-design/charts';\n\nclass Page extends Component {\n  ref = createRef();\n\n  // DownloadImage\n  downloadImage = () => {\n    this.ref.current?.downloadImage();\n  };\n\n  // Get data base64\n  toDataURL = () => {\n    console.log(this.ref.current?.toDataURL());\n  };\n\n  render() {\n    const data = [\n      { year: '1991', value: 3 },\n      { year: '1992', value: 4 },\n      { year: '1993', value: 3.5 },\n      { year: '1994', value: 5 },\n      { year: '1995', value: 4.9 },\n      { year: '1996', value: 6 },\n      { year: '1997', value: 7 },\n      { year: '1998', value: 9 },\n      { year: '1999', value: 13 },\n    ];\n\n    const config = {\n      data,\n      title: {\n        visible: true,\n        text: '带数据点的折线图',\n      },\n      xField: 'year',\n      yField: 'value',\n    };\n\n    return (\n      <div>\n        <button type=\"button\" onClick={this.downloadImage} style={{ marginRight: 24 }}>\n          下载图片\n        </button>\n        <button type=\"button\" onClick={this.toDataURL}>\n          获取图片信息\n        </button>\n        <Line {...config} chartRef={this.ref} />\n      </div>\n    );\n  }\n}\nexport default Page;\n```\n\n### FunctionComponent\n\n```tsx | pure\nimport React, { useRef } from 'react';\nimport { Line } from '@ant-design/charts';\n\nconst Page: React.FC = () => {\n  const data = [\n    { year: '1991', value: 3 },\n    { year: '1992', value: 4 },\n    { year: '1993', value: 3.5 },\n    { year: '1994', value: 5 },\n    { year: '1995', value: 4.9 },\n    { year: '1996', value: 6 },\n    { year: '1997', value: 7 },\n    { year: '1998', value: 9 },\n    { year: '1999', value: 13 },\n  ];\n\n  const config = {\n    data,\n    title: {\n      visible: true,\n      text: '带数据点的折线图',\n    },\n    xField: 'year',\n    yField: 'value',\n  };\n\n  const ref = useRef();\n\n  // 导出图片\n  const downloadImage = () => {\n    ref.current?.downloadImage();\n  };\n\n  // 获取图表 base64 数据\n  const toDataURL = () => {\n    console.log(ref.current?.toDataURL());\n  };\n\n  return (\n    <div>\n      <button type=\"button\" onClick={downloadImage} style={{ marginRight: 24 }}>\n        导出图片\n      </button>\n      <button type=\"button\" onClick={toDataURL}>\n        获取图表信息\n      </button>\n      <Line {...config} chartRef={ref} />\n    </div>\n  );\n};\nexport default Page;\n```\n\nresult：\n\n<img src=\"https://gw.alipayobjects.com/zos/antfincdn/8hy4uv7YyD/60155b1e-41b0-4e02-8ce1-8c7044792ce8.png\" width=\"600\">\n\n## Gallery\n\n[gallery](https://charts.ant.design/demos/global)\n\n## Document\n\n### API\n\nDirect [G2Plot](https://antv-g2plot.gitee.io/zh)\n\nExtra props:\n\n| Property  | Description       | Type                                        | defaultValue |\n| --------- | ----------------- | ------------------------------------------- | ------------ |\n| chartRef  | chart ref         | (React.MutableRefObject&lt;Line&gt;)=> void | -            |\n| className | container class   | string                                      | -            |\n| style     | container style   | React.CSSProperties                         | -            |\n| memoData  | controll rerender | string \\| number \\| any []                  | -            |\n\n[More usage](https://charts.ant.design/guide/case)\n\n### [FAQ](https://github.com/ant-design/ant-design-charts/issues)\n\n### How to Contribute\n\nWe welcome all contributions.\n\n### License\n\nCharts is available under the License MIT.\n\n## develop\n\n### depend\n\n- install [nodejs](https://nodejs.org/en/)\n\n### start\n\n```bash | pure\n# 安装依赖\n$ npm install\n\n# 开发 library\n$ npm run dev\n```\n","readmeFilename":"README.md"}