{"id":20461388,"url":"https://github.com/antvis/f2-canvas","last_synced_at":"2025-04-13T06:16:27.823Z","repository":{"id":66142101,"uuid":"154000508","full_name":"antvis/f2-canvas","owner":"antvis","description":"微信小程序 F2 自定义图表组件","archived":false,"fork":false,"pushed_at":"2020-02-21T08:27:27.000Z","size":17,"stargazers_count":120,"open_issues_count":24,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-13T06:16:08.787Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/antvis.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}},"created_at":"2018-10-21T11:22:45.000Z","updated_at":"2025-02-25T03:21:57.000Z","dependencies_parsed_at":"2023-03-25T00:18:00.015Z","dependency_job_id":null,"html_url":"https://github.com/antvis/f2-canvas","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"6f3881e4f708a61d9daba05f797848ba3d4362a8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Ff2-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Ff2-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Ff2-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Ff2-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antvis","download_url":"https://codeload.github.com/antvis/f2-canvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670438,"owners_count":21142905,"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":[],"created_at":"2024-11-15T12:25:08.979Z","updated_at":"2025-04-13T06:16:27.801Z","avatar_url":"https://github.com/antvis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @antv/f2-canvas\n\n微信小程序 F2 图表组件\n\n## 安装\n\n```bash\nnpm i @antv/f2-canvas\n```\n\n## 快速开始\n\n下面我们就开始使用 `f2-canvas` 组件来绘制图表吧，这里假设用户已经初步了解微信小程序的基础框架，如不了解，请先阅读官网教程： [官方教程](https://developers.weixin.qq.com/miniprogram/dev/index.html)。\n\n以绘制柱状图为例：\n\n\u003cimg src=\"https://gw.alipayobjects.com/zos/rmsportal/aDmzXXwkPmUFLCXwXBvo.gif\" width=\"332\"\u003e\n\n* STEP 1：在 pages 目录下新建 column 目录，该目录需要包含以下几个文件：\n  + index.js\n  + index.json\n  + index.wxml\n  + index.wxss\n\n  各个文件的内容如下：\n\n  + `index.json` 配置文件，引入 f2-canvas 组件，由于微信小程序组件名不允许包含数字，所以这里将其命名为 ff-canvas\n\n  ```js\n  // index.json\n  {\n    \"usingComponents\": {\n      \"ff-canvas\": \"@antv/f2-canvas\"\n    }\n  }\n  ```\n\n  + `index.wxml` 视图，使用 ff-canvas 组件，其中 `opts` 是一个我们在 index.js 中定义的对象，**必设属性**，它使得图表能够在页面加载后被初始化并设置，详见 index.js 中的使用。\n\n  ```html\n  \u003c!--index.wxml--\u003e\n  \u003cview class=\"container\"\u003e\n    \u003cff-canvas id=\"column-dom\" canvas-id=\"column\" opts=\"{{ opts }}\"\u003e\u003c/ff-canvas\u003e\n  \u003c/view\u003e\n  ```\n\n  + `index.js` 逻辑处理，这里还需要引入 F2 用于绘制图表，结构如下，注意路径正确。\n\n  ```js\n  // index.js\n  import F2 from '@antv/wx-f2'; // 注：也可以不引入， initChart 方法已经将 F2 传入，如果需要引入，注意需要安装 @antv/wx-f2 依赖\n\n  let chart = null;\n\n  function initChart(canvas, width, height, F2) { // 使用 F2 绘制图表\n    const data = [\n      { year: '1951 年', sales: 38 },\n      { year: '1952 年', sales: 52 },\n      { year: '1956 年', sales: 61 },\n      { year: '1957 年', sales: 145 },\n      { year: '1958 年', sales: 48 },\n      { year: '1959 年', sales: 38 },\n      { year: '1960 年', sales: 38 },\n      { year: '1962 年', sales: 38 },\n    ];\n    chart = new F2.Chart({\n      el: canvas,\n      width,\n      height\n    });\n\n    chart.source(data, {\n      sales: {\n        tickCount: 5\n      }\n    });\n    chart.tooltip({\n      showItemMarker: false,\n      onShow(ev) {\n        const { items } = ev;\n        items[0].name = null;\n        items[0].name = items[0].title;\n        items[0].value = '¥ ' + items[0].value;\n      }\n    });\n    chart.interval().position('year*sales');\n    chart.render();\n    return chart;\n  }\n\n  Page({\n    data: {\n      opts: {\n        onInit: initChart\n      }\n    },\n\n    onReady() {\n    }\n  });\n  ```\n\n 由于 f2-canvas 组件主要是对小程序的画布上下文和 html5 canvas 的上下文进行了适配以支持 F2 在小程序端的渲染，所以 **F2 能绘制什么图表，小程序端就能绘制什么图表**，使用时也只需按照 F2 的语法来写即可。\n\n本项目只展示了部分 demos，更详细的请见 [AntV F2](https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html)。\n\n需要注意的是，在创建 chart 的时候，需要使用 'el' 属性来指定容器，对应 `this.data.opts.onInit` 方法形参中的 `canvas` 属性，另外该方法还会返回 `width`, `height` 属性分别对应画布的宽和高。\n\n```js\nchart = new F2.Chart({\n  el: canvas,\n  width,\n  height\n});\n```\n\n\n## 不支持的功能\n\n目前由于小程序不支持 document，所以 Guide.Html 辅助元素组件目前仍无法使用，其他 F2 的功能全部支持。\n\n\n## 微信版本要求\n\n* 微信版本 **\u003e= 6.6.3**\n* 基础库版本 **\u003e= 2.2.1**\n* 开发者工具版本 **\u003e= 1.02.1808300**\n\n## 常见问题\n\n### 问题 1\n按照 demo 实例操作，但是报如下错误：\n\n```js\nVM4466:1 TypeError: Cannot read property 'defaultView' of undefined\nat Object.getStyle (f2.js? [sm]:1)\nat Object.getWidth (f2.js? [sm]:1)\nat t._initCanvas (f2.js? [sm]:1)\nat new t (f2.js? [sm]:1)\nat e._initCanvas (f2.js? [sm]:1)\nat e._init (f2.js? [sm]:1)\nat new e (f2.js? [sm]:1)\nat Object.initChart [as onInit] (test.js? [sm]:18)\nat t. (f2-canvas.js? [sm]:94)\nat WAService.js:12\n```\n\n**解决**\n检查是否有在 .wxss 文件中为 ff-canvas 组件定义 width 和 height 样式属性，如没有，加上即可，如此代码所示：https://github.com/antvis/wx-f2/blob/master/app.wxss#L16\n\n## 如何贡献\n\n如果您在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/f2-canvas/issues) 看看有没有类似的 bug 或者建议。\n\n## License\n\n[MIT license](https://github.com/antvis/f2-canvas/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Ff2-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantvis%2Ff2-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Ff2-canvas/lists"}