{"id":19014232,"url":"https://github.com/spritejs/q-charts","last_synced_at":"2025-08-10T04:06:47.177Z","repository":{"id":39510912,"uuid":"191913358","full_name":"spritejs/q-charts","owner":"spritejs","description":"A visulization library based on spritejs","archived":false,"fork":false,"pushed_at":"2022-12-10T19:05:22.000Z","size":2527,"stargazers_count":25,"open_issues_count":29,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-02T08:17:56.189Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://qcharts.cn","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/spritejs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGE_LOG.md","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":"2019-06-14T09:16:15.000Z","updated_at":"2024-11-15T19:11:45.000Z","dependencies_parsed_at":"2023-01-26T06:30:15.278Z","dependency_job_id":null,"html_url":"https://github.com/spritejs/q-charts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/spritejs/q-charts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fq-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fq-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fq-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fq-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spritejs","download_url":"https://codeload.github.com/spritejs/q-charts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fq-charts/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269673716,"owners_count":24457188,"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","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-08T19:28:27.158Z","updated_at":"2025-08-10T04:06:47.159Z","avatar_url":"https://github.com/spritejs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# QCharts\n\n### 特点\n\nQCharts 是一个基于 \u003ca target=\"_blank\" href=\"https://www.spritejs.com\"\u003espritejs\u003c/a\u003e 封装的图表库，它以数据驱动，将图表以最小组件进行拆分，具有高度全面灵活的属性配置方法，可对图表绘制过程中所有的点、线、面的大小、位置、填充颜色、描边颜色、描边线型、透明度等属性进行配置，配置方法简单易懂，语义清晰，无论如何复杂的图表，qcharts都能轻松胜任。 \u003ca target=\"_blank\" href=\"https://www.spritejs.com/q-charts/\"\u003e→详细文档\u003c/a\u003e，Demo：\u003ca target=\"_blank\" href=\"https://github.com/yaotaiyang/q-charts-demo\"\u003eQuickstart\u003c/a\u003e\n\n### 安装\n\n1.通过 npm 获取 QCharts，我们提供了 QCharts npm 包，通过下面的命令即可完成安装\n\n```shell\nnpm install @qcharts/core --save\n```\n```javascript\n// 通过模块引入的方式使用CatCharts\nimport { Chart, Pie, Tooltip, Legend } from '@qcharts/core'\n```\n\n2.既可以下载脚本到本地，也可以通过 cdn 获取 QCharts；QCharts依赖于spritejs，需要先引入spritejs。\n\n```html\n\u003cscript src=\"https://unpkg.com/spritejs/dist/spritejs.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/@qcharts/core/lib/index.js\"\u003e\u003c/script\u003e\n```\n### 开始使用\n\n1.创建div图表容器，qcharts初始化container属性支持id选择器与class选择器\n\n```html\n\u003cdiv id='app'\u003e\u003c/div\u003e\n```\n\n2.编写绘图代码\n\n```javascript\n// 指定图表数据源\nchart.source(data, {\n  row: 'catgory',  // 以catgory字段分组\n  value: 'sales', // 以sales字段取值\n  text: 'date'   //  date为文本字段\n})\n\n// 创建折线对象\nconst line = new Line()\n// 设置折线点的描边颜色为白色\nline.style('point', { strokeColor: '#fff' })\n// 创建提示框对象，格式化展示属性为：date scale\nconst tooltip = new Tooltip({\n  formatter: function(data) {\n    return `${data.date} ${data.sales}`\n  }\n})\n// 创建底部坐标轴对象\nconst axisBottom = new Axis()\n// 创建左侧坐标轴对象。隐藏轴体直线和刻度\nconst axisLeft = new Axis({ orient: 'left' }).style('axis', false).style('scale', false)\n// 创建图例对象，设置位置以及图标和文本大小\nconst legend = new Legend({ align: ['center', 'bottom'] })\n  .style('icon', { borderRadius: 10 })\n  .style('text', { fontSize: 12 })\n// 装载组件\nchart.add([line, tooltip, axisBottom, axisLeft, legend])\n// 渲染图表\nchart.render()\n```\n\n一张折线图就绘制成功\n\n\u003cimg src=\"https://p0.ssl.qhimg.com/d/inn/717a6a22789a/base-line.png\" width=\"400\"\u003e\n\n## 在 React/Vue 中使用qchart\n\n基于qchart良好的组合性和扩展性，qchart天然支持对React和 Vue 这两个常用框架的深度整合，在React环境下，我们推荐使用[cat-charts-react](\u003chttps://github.com/spritejs/cat-charts-react\u003e) ，在Vue环境下，我们推荐使用 [cat-charts-vue](\u003chttps://github.com/spritejs/cat-charts-vue\u003e)。这两个产品都是基于qchart的封装，与qchart有着一致的开发体验，可以前往官网获取详细的使用说明和示例。当然，你可以自己动手封装成其他框架下的组件，在qchart下，这些封装成本非常低。\n\n## 在微信小程序中使用qchart\n\nqchart从v0.1.11开始支持微信小程序，使用方法如下：\n\n通过NPM安装@spritejs/wxapp和@qcharts/core\n\n```bash\nnpm install @spritejs/wxapp @qcharts/core --save\n```\n\n然后在微信小程序中[构建 NPM 包](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)。\n\n安装并构建之后，在app.json中配置chart组件：\n\n```json\n  \"usingComponents\": {\n    \"q-chart\": \"@qcharts/core/chart\"\n  }\n```\n\n首先在页面index.wxss文件中编写设置图表大小的css样式：\n\n```css\n.line-chart{\n  height: 400px;\n  width: 80%;\n  margin: 0 auto;\n}\n```\n\n然后在要使用的页面index.wxml文件中引入组件：\n\n```xml\n\u003cview\u003e\n  \u003cq-chart bindChartCreated=\"onChartCreated\" chartId=\"my-chart\" chart-class=\"line-chart\"\u003e   \u003c/q-chart\u003e\n\u003c/view\u003e\n```\n\nchartId为图表canvas的canvas-id值，默认值为“q-chart”，在当前page中必须唯一。chart-class可设置chart组件中canvas父容器的class属性，chart的与其父容器的大小保持一致。\n\nbindChartCreated事件处理中通过参数可以获得创建好的chart对象：\n\n```js\nconst qcharts = require('@qcharts/core');\n\nPage({\n  onChartCreated({ detail: { chart } }) {\n    const data = [\n      { date: '05-01', catgory: '图例一', sales: 15.2 },\n      { date: '05-02', catgory: '图例一', sales: 39.2 },\n      { date: '05-03', catgory: '图例一', sales: 31.2 },\n      { date: '05-04', catgory: '图例一', sales: 65.2 },\n      { date: '05-05', catgory: '图例一', sales: 55.2 },\n      { date: '05-06', catgory: '图例一', sales: 75.2 },\n      { date: '05-07', catgory: '图例一', sales: 95.2 },\n      { date: '05-08', catgory: '图例一', sales: 65.2 },\n    ]\n\n    const { Line, Legend, Tooltip, Axis } = qcharts\n\n    chart.source(data, {\n      row: 'catgory',\n      value: 'sales',\n      text: 'date'\n    })\n\n    const line = new Line()\n    line.style('point', { strokeColor: '#fff' })\n\n    const tooltip = new Tooltip({\n      formatter: function(data) {\n        return `${data.date} ${data.sales}`\n      }\n    })\n\n    const axisBottom = new Axis()\n\n    const axisLeft = new Axis({ orient: 'left' })\n      .style('axis', false).style('scale', false)\n\n    const legend = new Legend({ align: ['center', 'bottom'] })\n      .style('icon', { borderRadius: 10 }).style('text', { fontSize: 12 })\n\n    chart.add([line, tooltip, axisBottom, axisLeft, legend])\n    chart.render()\n  },\n});\n```\n\n更多小程序图表示例可以前往我们的[官方小程序示例代码仓库](\u003chttps://github.com/spritejs/qcharts-wxapp-demo\u003e)进行查看","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fq-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspritejs%2Fq-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fq-charts/lists"}