{"id":19978128,"url":"https://github.com/visactor/univer-vchart-plugin","last_synced_at":"2025-05-04T04:31:34.209Z","repository":{"id":244769244,"uuid":"816211293","full_name":"VisActor/univer-vchart-plugin","owner":"VisActor","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-27T03:26:17.000Z","size":420,"stargazers_count":8,"open_issues_count":1,"forks_count":1,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-04-08T02:51:17.579Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/VisActor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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":"2024-06-17T09:12:15.000Z","updated_at":"2025-03-05T16:57:05.000Z","dependencies_parsed_at":"2024-11-13T03:30:56.409Z","dependency_job_id":"5cb36d7b-2b52-40a9-a049-db721b06fa24","html_url":"https://github.com/VisActor/univer-vchart-plugin","commit_stats":null,"previous_names":["visactor/univer-vchart-plugin"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2Funiver-vchart-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2Funiver-vchart-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2Funiver-vchart-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2Funiver-vchart-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VisActor","download_url":"https://codeload.github.com/VisActor/univer-vchart-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252288912,"owners_count":21724323,"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-13T03:30:48.013Z","updated_at":"2025-05-04T04:31:29.186Z","avatar_url":"https://github.com/VisActor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/VisActor#gh-light-mode-only\" target=\"_blank\"\u003e\n    \u003cimg alt=\"VisActor Logo\" width=\"200\" src=\"https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/VisActor#gh-dark-mode-only\" target=\"_blank\"\u003e\n    \u003cimg alt=\"VisActor Logo\" width=\"200\" src=\"https://github.com/VisActor/.github/blob/main/profile/logo_500_200_dark.svg\"/\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003euniver-vchart-plugin\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nThe vchart univer plugin encapsulates the capability to create chart overlays within [Univer](https://univer.ai/zh-CN).\n\n![](https://github.com/visactor/univer-vchart-plugin/actions/workflows/bug-server.yml/badge.svg)\n![](https://github.com/visactor/univer-vchart-plugin/actions/workflows/unit-test.yml/badge.svg)\n[![npm Version](https://img.shields.io/npm/v/@visactor/univer-vchart-plugin.svg)](https://www.npmjs.com/package/@visactor/univer-vchart-plugin)\n[![npm Download](https://img.shields.io/npm/dm/@visactor/univer-vchart-plugin.svg)](https://www.npmjs.com/package/@visactor/univer-vchart-plugin)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/visactor/univer-vchart-plugin/blob/main/CONTRIBUTING.md#your-first-pull-request)\n\n![](https://img.shields.io/badge/language-TypeScript-red.svg) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/univer-vchart-plugin/blob/main/LICENSE)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[English](./README.md) | 简体中文\n\n\u003c/div\u003e\n\n## Introduction\n\nVChart is a chart component library within the VisActor visualization system. [Univer](https://univer.ai/) is an open-source Office suite. Using the univer-vchart-plugin, you can easily create chart overlays.\n\n## 🔨 Usage\n\n### 📦 Installation\n\n```bash\n# npm\n$ npm install @visactor/univer-vchart-plugin\n\n# pnpm\n$ pnpm add @visactor/univer-vchart-plugin\n```\n\n### 📊 A Simple Chart\n\n\u003cimg src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/univer-vchart-plugin.png\" style=\"width: 800px\"\u003e\n\n```typescript\nimport {\n  UniverVChartPlugin,\n  CREATE_VCHART_COMMAND_ID,\n} from \"@visactor/univer-vchart-plugin\";\n\nexport function setupUniver() {\n  const univer = new Univer({\n    theme: defaultTheme,\n    locale: LocaleType.EN_US,\n    locales: {\n      [LocaleType.EN_US]: enUS,\n    },\n  });\n  univer.registerPlugin(UniverVChartPlugin);\n}\n\nexport function setupVChartDemo($toolbar: HTMLElement, univerAPI: FUniver) {\n  const $button = document.createElement(\"a\");\n  $button.textContent = \"Create vchart demo\";\n  $toolbar.appendChild($button);\n\n  $button.addEventListener(\"click\", async () =\u003e {\n    if (!univerAPI) throw new Error(\"univerAPI is not defined\");\n\n    const activeWorkbook = univerAPI.getActiveWorkbook();\n    if (!activeWorkbook) throw new Error(\"activeWorkbook is not defined\");\n    const activeSheet = activeWorkbook.getActiveSheet();\n    if (!activeSheet) throw new Error(\"activeSheet is not defined\");\n\n    await univerAPI.executeCommand(CREATE_VCHART_COMMAND_ID, {\n      spec: {\n        type: \"line\",\n        data: {\n          values: [\n            {\n              time: \"2:00\",\n              value: 8,\n            },\n            {\n              time: \"4:00\",\n              value: 9,\n            },\n            {\n              time: \"6:00\",\n              value: 11,\n            },\n            {\n              time: \"8:00\",\n              value: 14,\n            },\n            {\n              time: \"10:00\",\n              value: 16,\n            },\n            {\n              time: \"12:00\",\n              value: 17,\n            },\n            {\n              time: \"14:00\",\n              value: 17,\n            },\n            {\n              time: \"16:00\",\n              value: 16,\n            },\n            {\n              time: \"18:00\",\n              value: 15,\n            },\n          ],\n        },\n        xField: \"time\",\n        yField: \"value\",\n      },\n    });\n  });\n}\n```\n\n## 🔗 Related Links\n\n- [Homepage](https://www.visactor.io/vchart)\n- [VCharts Chart Examples](https://www.visactor.io/vchart/example)\n- [VChart Chart Tutorial](https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide)\n- [VChart Chart Configuration Options](https://www.visactor.io/vchart/option/)\n- [VChart API](https://www.visactor.io/vchart/api/API/vchart)\n- [VGrammar](https://www.visactor.io/vgrammar)\n- [VRender](https://www.visactor.io/vrender)\n- [FAQ](https://www.visactor.io/vchart/guide/tutorial_docs/FAQ)\n- [CodeSandbox Template](https://codesandbox.io/s/the-template-of-visactor-vchart-vl84ww?file=/src/index.ts) for submitting bugs\n\n## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/visactor/univer-vchart-plugin/blob/main/CONTRIBUTING.md#your-first-pull-request)\n\nIf you would like to contribute, please read the [Code of Conduct](./CODE_OF_CONDUCT.md) and the [Contribution Guide](./CONTRIBUTING.zh-CN.md) first.\n\nSmall streams make big rivers!\n\n\u003ca href=\"https://github.com/visactor/univer-vchart-plugin/graphs/contributors\"\u003e\u003cimg src=\"https://contrib.rocks/image?repo=visactor/univer-vchart-plugin\" /\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisactor%2Funiver-vchart-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisactor%2Funiver-vchart-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisactor%2Funiver-vchart-plugin/lists"}