{"id":19978125,"url":"https://github.com/visactor/vchart-svg-plugin","last_synced_at":"2025-10-04T02:01:53.446Z","repository":{"id":253767064,"uuid":"841759421","full_name":"VisActor/vchart-svg-plugin","owner":"VisActor","description":null,"archived":false,"fork":false,"pushed_at":"2024-08-20T01:05:52.000Z","size":129,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-05-04T04:32:44.556Z","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-08-13T01:49:50.000Z","updated_at":"2025-03-24T09:15:25.000Z","dependencies_parsed_at":"2024-11-13T03:30:55.974Z","dependency_job_id":"72efa7d5-ea9a-4584-b576-dd6345905d52","html_url":"https://github.com/VisActor/vchart-svg-plugin","commit_stats":null,"previous_names":["visactor/vchart-svg-plugin"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/VisActor/vchart-svg-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2Fvchart-svg-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2Fvchart-svg-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2Fvchart-svg-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2Fvchart-svg-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VisActor","download_url":"https://codeload.github.com/VisActor/vchart-svg-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2Fvchart-svg-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278254467,"owners_count":25956600,"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-10-04T02:00:05.491Z","response_time":63,"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-13T03:30:46.325Z","updated_at":"2025-10-04T02:01:53.397Z","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\u003evchart-svg-plugin\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\nvchart-svg-plugin is a vchart plugin used to convert the rendered content of vchart into svg, making it convenient for use in printing, SSR, and other environments.\n\n![](https://github.com/visactor/vchart-svg-plugin/actions/workflows/bug-server.yml/badge.svg)\n![](https://github.com/visactor/vchart-svg-plugin/actions/workflows/unit-test.yml/badge.svg)\n[![npm Version](https://img.shields.io/npm/v/@visactor/vchart-svg-plugin.svg)](https://www.npmjs.com/package/@visactor/vchart-svg-plugin)\n[![npm Download](https://img.shields.io/npm/dm/@visactor/vchart-svg-plugin.svg)](https://www.npmjs.com/package/@visactor/vchart-svg-plugin)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/visactor/vchart-svg-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/vchart-svg-plugin/blob/main/LICENSE)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nEnglish| [简体中文](./README.zh-CN.md) \n\n\u003c/div\u003e\n\n## Introduction\n\nVChart is a chart component library in the VisActor visualization system, based on vchart-svg-plugin, which can easily convert charts into SVG files.\n\n## 🔨 Usage\n\n### 📦 Installation\n\n```bash\n# npm\n$ npm install @visactor/vchart-svg-plugin\n\n# yarn\n$ yarn add @visactor/vchart-svg-plugin\n```\n\n### 📊 A Simple Chart\n\n\u003cdiv\u003e\n\u003csvg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"  x=\"0px\"  y=\"0px\"  width=\"639px\"  height=\"411px\"  viewBox=\"0 0 639 411\"  \u003e\n  \u003crect x=\"0\" y=\"0\" width=\"639\" height=\"411\" pointer-events=\"none\"  fill=\"#ffffff\"   /\u003e\n  \u003cg class=\"\" \u003e\u003cg class=\"root\" \u003e\u003cg class=\"title\"  transform=\"matrix(1, 0, 0, 1, 20, 24)\" \u003e\u003cg class=\"title-container\" \u003e\u003cg  fill=\"#21252c\"  text-anchor=\"start\"  alignment-baseline=\"hanging\"  font-size=\"16\"  font-weight=\"bold\"  class=\"mainTitle\" \u003e\u003ctext dy=\"16.64\" dx=\"0\"\u003eStatistics of Surface Element Content\u003c/text\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003cg class=\"regionGroup_6\"  transform=\"matrix(1, 0, 0, 1, 122, 70)\" \u003e\u003cg class=\"seriesGroup_pie_8_11\" \u003e\u003cg class=\"pie_12\" \u003e\u003cpath  fill=\"#1664FF\"  stroke-width=\"0\"  stroke=\"#1664FF\"  fill-opacity=\"1\"  transform=\"matrix(1, 0, 0, 1, 248.5, 160.5)\"  d=\"M7.862232450526007e-15, -128.4A128.4,128.4,0,0,1,27.221712913991773,125.48122706615605L0, 0Z\"   /\u003e\u003cpath  fill=\"#1AC6FF\"  stroke-width=\"0\"  stroke=\"#1AC6FF\"  fill-opacity=\"1\"  transform=\"matrix(1, 0, 0, 1, 248.5, 160.5)\"  d=\"M27.221712913991773, 125.48122706615605A128.4,128.4,0,0,1,-128.2828218808454,5.484305816353947L0, 0Z\"   /\u003e\u003cpath  fill=\"#FF8A00\"  stroke-width=\"0\"  stroke=\"#FF8A00\"  fill-opacity=\"1\"  transform=\"matrix(1, 0, 0, 1, 248.5, 160.5)\"  d=\"M-128.2828218808454, 5.484305816353947A128.4,128.4,0,0,1,-114.58780375108536,-57.93267844233296L0, 0Z\"   /\u003e\u003cpath  fill=\"#3CC780\"  stroke-width=\"0\"  stroke=\"#3CC780\"  fill-opacity=\"1\"  transform=\"matrix(1, 0, 0, 1, 248.5, 160.5)\"  d=\"M-114.58780375108536, -57.93267844233296A128.4,128.4,0,0,1,-91.07729527707993,-90.50683004619925L0, 0Z\"   /\u003e\u003cpath  fill=\"#7442D4\"  stroke-width=\"0\"  stroke=\"#7442D4\"  fill-opacity=\"1\"  transform=\"matrix(1, 0, 0, 1, 248.5, 160.5)\"  d=\"M-91.07729527707993, -90.50683004619925A128.4,128.4,0,0,1,-68.2543569442313,-108.75616193177041L0, 0Z\"   /\u003e\u003cpath  fill=\"#FFC400\"  stroke-width=\"0\"  stroke=\"#FFC400\"  fill-opacity=\"1\"  transform=\"matrix(1, 0, 0, 1, 248.5, 160.5)\"  d=\"M-68.2543569442313, -108.75616193177041A128.4,128.4,0,0,1,-47.94152988628027,-119.11410374998796L0, 0Z\"   /\u003e\u003cpath  fill=\"#304D77\"  stroke-width=\"0\"  stroke=\"#304D77\"  fill-opacity=\"1\"  transform=\"matrix(1, 0, 0, 1, 248.5, 160.5)\"  d=\"M-47.94152988628027, -119.11410374998796A128.4,128.4,0,0,1,-28.009592195315932,-125.3077122329352L0, 0Z\"   /\u003e\u003cpath  fill=\"#B48DEB\"  stroke-width=\"0\"  stroke=\"#B48DEB\"  fill-opacity=\"1\"  transform=\"matrix(1, 0, 0, 1, 248.5, 160.5)\"  d=\"M-28.009592195315932, -125.3077122329352A128.4,128.4,0,0,1,-2.3586697351578022e-14,-128.4L0, 0Z\"   /\u003e\u003c/g\u003e\u003cg class=\"emptyCircle_14\" \u003e\u003c/g\u003e\u003c/g\u003e\u003cg class=\"pie-label-0-component_25\" \u003e\u003cg class=\"data-label\" \u003e\u003cg class=\"arc-label\" \u003e\u003cg  stroke-width=\"0\"  stroke-linejoin=\"bevel\"  stroke=\"#ffffff\"  fill-opacity=\"1\"  fill=\"#1664FF\"  transform=\"matrix(1, 0, 0, 1, 434.1262053735279, 144.67890470555147)\"  text-anchor=\"middle\"  alignment-baseline=\"middle\"  font-size=\"14\"  font-family=\"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol\"  font-weight=\"normal\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003eoxygen\u003c/text\u003e\u003c/g\u003e\u003cpath  stroke-width=\"1\"  stroke=\"#1664FF\"  d=\"M376.1682214869747 146.81112779105666L396.0542372949146 144.67890470555147L406.0542372949146 144.67890470555147\"  fill=\"none\"  /\u003e\u003cg  stroke-width=\"0\"  stroke-linejoin=\"bevel\"  stroke=\"#ffffff\"  fill-opacity=\"1\"  fill=\"#1AC6FF\"  transform=\"matrix(1, 0, 0, 1, 116.10160185737874, 277.9872291302481)\"  text-anchor=\"middle\"  alignment-baseline=\"middle\"  font-size=\"14\"  font-family=\"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol\"  font-weight=\"normal\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003esilicon\u003c/text\u003e\u003c/g\u003e\u003cpath  stroke-width=\"1\"  stroke=\"#1AC6FF\"  d=\"M170.0579690869725 262.15337075689933L151.70958067817952 277.9872291302481L141.70958067817952 277.9872291302481\"  fill=\"none\"  /\u003e\u003cg  stroke-width=\"0\"  stroke-linejoin=\"bevel\"  stroke=\"#ffffff\"  fill-opacity=\"1\"  fill=\"#FF8A00\"  transform=\"matrix(1, 0, 0, 1, 57.132705096804074, 129.17484318103348)\"  text-anchor=\"middle\"  alignment-baseline=\"middle\"  font-size=\"14\"  font-family=\"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol\"  font-weight=\"normal\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003ealuminum\u003c/text\u003e\u003c/g\u003e\u003cpath  stroke-width=\"1\"  stroke=\"#FF8A00\"  d=\"M122.9931728078986 133.39656242887264L103.20567262610095 129.17484318103348L93.20567262610095 129.17484318103348\"  fill=\"none\"  /\u003e\u003cg  stroke-width=\"0\"  stroke-linejoin=\"bevel\"  stroke=\"#ffffff\"  fill-opacity=\"1\"  fill=\"#3CC780\"  transform=\"matrix(1, 0, 0, 1, 98.45072338677764, 73.65027210261424)\"  text-anchor=\"middle\"  alignment-baseline=\"middle\"  font-size=\"14\"  font-family=\"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol\"  font-weight=\"normal\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003eiron\u003c/text\u003e\u003c/g\u003e\u003cpath  stroke-width=\"1\"  stroke=\"#3CC780\"  d=\"M144.38562982112327 85.35508718312445L125.81270763970733 73.65027210261424L115.81270763970733 73.65027210261424\"  fill=\"none\"  /\u003e\u003cg  stroke-width=\"0\"  stroke-linejoin=\"bevel\"  stroke=\"#ffffff\"  fill-opacity=\"1\"  fill=\"#7442D4\"  transform=\"matrix(1, 0, 0, 1, 103.75086291667162, 50.946925385855124)\"  text-anchor=\"middle\"  alignment-baseline=\"middle\"  font-size=\"14\"  font-family=\"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol\"  font-weight=\"normal\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003ecalcium\u003c/text\u003e\u003c/g\u003e\u003cpath  stroke-width=\"1\"  stroke=\"#7442D4\"  d=\"M168.3133216895684 60.21711700624401L143.66383441325365 50.946925385855124L133.66383441325365 50.946925385855124\"  fill=\"none\"  /\u003e\u003cg  stroke-width=\"0\"  stroke-linejoin=\"bevel\"  stroke=\"#ffffff\"  fill-opacity=\"1\"  fill=\"#FFC400\"  transform=\"matrix(1, 0, 0, 1, 120.3440130929497, 36.89022715880614)\"  text-anchor=\"middle\"  alignment-baseline=\"middle\"  font-size=\"14\"  font-family=\"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol\"  font-weight=\"normal\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003esodium\u003c/text\u003e\u003c/g\u003e\u003cpath  stroke-width=\"1\"  stroke=\"#FFC400\"  d=\"M190.17168124521618 46.113081030913605L158.77999484343798 36.89022715880614L148.77999484343798 36.89022715880614\"  fill=\"none\"  /\u003e\u003cg  stroke-width=\"0\"  stroke-linejoin=\"bevel\"  stroke=\"#ffffff\"  fill-opacity=\"1\"  fill=\"#304D77\"  transform=\"matrix(1, 0, 0, 1, 130.55325625889662, 22.89022715880614)\"  text-anchor=\"middle\"  alignment-baseline=\"middle\"  font-size=\"14\"  font-family=\"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol\"  font-weight=\"normal\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003epotassium\u003c/text\u003e\u003c/g\u003e\u003cpath  stroke-width=\"1\"  stroke=\"#304D77\"  d=\"M210.3983801804518 37.883416426950575L178.9222214078224 22.89022715880614L168.9222214078224 22.89022715880614\"  fill=\"none\"  /\u003e\u003cg  stroke-width=\"0\"  stroke-linejoin=\"bevel\"  stroke=\"#ffffff\"  fill-opacity=\"1\"  fill=\"#B48DEB\"  transform=\"matrix(1, 0, 0, 1, 174.52908113825885, 8.890227158806141)\"  text-anchor=\"middle\"  alignment-baseline=\"middle\"  font-size=\"14\"  font-family=\"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol\"  font-weight=\"normal\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003eothers\u003c/text\u003e\u003c/g\u003e\u003cpath  stroke-width=\"1\"  stroke=\"#B48DEB\"  d=\"M234.41011445590985 32.87541331955492L209.98305300105181 8.890227158806141L199.98305300105181 8.890227158806141\"  fill=\"none\"  /\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003cg class=\"legend\"  transform=\"matrix(1, 0, 0, 1, 20, 131.10000000000002)\" \u003e\u003cg class=\"innerView\" \u003e\u003cg class=\"\" \u003e\u003cg class=\"legendItem\"  cursor=\"pointer\" \u003e\u003cg class=\"\"  transform=\"matrix(1, 0, 0, 1, 7, 9.8)\" \u003e\u003cpath  stroke-opacity=\"1\"  stroke-width=\"0\"  stroke=\"#1664FF\"  fill-opacity=\"1\"  fill=\"#1664FF\"  opacity=\"1\"  cursor=\"pointer\"  d=\"M5 0C5 2.761423749153967 2.761423749153968 5 3.061616997868383e-16 5C-2.7614237491539666 5 -4.999999999999999 2.761423749153968 -5 6.123233995736766e-16C-5 -2.7614237491539666 -2.7614237491539684 -4.999999999999999 -9.184850993605148e-16 -5C2.761423749153966 -5 4.999999999999999 -2.7614237491539684 5 -1.2246467991473533e-15\"  class=\"legendItemShape\"   /\u003e\u003cg  fill=\"#606773\"  opacity=\"1\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 11, 0)\"  text-anchor=\"start\"  alignment-baseline=\"middle\"  font-size=\"12\"  class=\"legendItemLabel\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003eoxygen\u003c/text\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003cg class=\"legendItem\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 0, 25.6)\" \u003e\u003cg class=\"\"  transform=\"matrix(1, 0, 0, 1, 7, 9.8)\" \u003e\u003cpath  stroke-opacity=\"1\"  stroke-width=\"0\"  stroke=\"#1AC6FF\"  fill-opacity=\"1\"  fill=\"#1AC6FF\"  opacity=\"1\"  cursor=\"pointer\"  d=\"M5 0C5 2.761423749153967 2.761423749153968 5 3.061616997868383e-16 5C-2.7614237491539666 5 -4.999999999999999 2.761423749153968 -5 6.123233995736766e-16C-5 -2.7614237491539666 -2.7614237491539684 -4.999999999999999 -9.184850993605148e-16 -5C2.761423749153966 -5 4.999999999999999 -2.7614237491539684 5 -1.2246467991473533e-15\"  class=\"legendItemShape\"   /\u003e\u003cg  fill=\"#606773\"  opacity=\"1\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 11, 0)\"  text-anchor=\"start\"  alignment-baseline=\"middle\"  font-size=\"12\"  class=\"legendItemLabel\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003esilicon\u003c/text\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003cg class=\"legendItem\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 0, 51.2)\" \u003e\u003cg class=\"\"  transform=\"matrix(1, 0, 0, 1, 7, 9.8)\" \u003e\u003cpath  stroke-opacity=\"1\"  stroke-width=\"0\"  stroke=\"#FF8A00\"  fill-opacity=\"1\"  fill=\"#FF8A00\"  opacity=\"1\"  cursor=\"pointer\"  d=\"M5 0C5 2.761423749153967 2.761423749153968 5 3.061616997868383e-16 5C-2.7614237491539666 5 -4.999999999999999 2.761423749153968 -5 6.123233995736766e-16C-5 -2.7614237491539666 -2.7614237491539684 -4.999999999999999 -9.184850993605148e-16 -5C2.761423749153966 -5 4.999999999999999 -2.7614237491539684 5 -1.2246467991473533e-15\"  class=\"legendItemShape\"   /\u003e\u003cg  fill=\"#606773\"  opacity=\"1\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 11, 0)\"  text-anchor=\"start\"  alignment-baseline=\"middle\"  font-size=\"12\"  class=\"legendItemLabel\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003ealuminum\u003c/text\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003cg class=\"legendItem\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 0, 76.80000000000001)\" \u003e\u003cg class=\"\"  transform=\"matrix(1, 0, 0, 1, 7, 9.8)\" \u003e\u003cpath  stroke-opacity=\"1\"  stroke-width=\"0\"  stroke=\"#3CC780\"  fill-opacity=\"1\"  fill=\"#3CC780\"  opacity=\"1\"  cursor=\"pointer\"  d=\"M5 0C5 2.761423749153967 2.761423749153968 5 3.061616997868383e-16 5C-2.7614237491539666 5 -4.999999999999999 2.761423749153968 -5 6.123233995736766e-16C-5 -2.7614237491539666 -2.7614237491539684 -4.999999999999999 -9.184850993605148e-16 -5C2.761423749153966 -5 4.999999999999999 -2.7614237491539684 5 -1.2246467991473533e-15\"  class=\"legendItemShape\"   /\u003e\u003cg  fill=\"#606773\"  opacity=\"1\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 11, 0)\"  text-anchor=\"start\"  alignment-baseline=\"middle\"  font-size=\"12\"  class=\"legendItemLabel\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003eiron\u003c/text\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003cg class=\"legendItem\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 0, 102.4)\" \u003e\u003cg class=\"\"  transform=\"matrix(1, 0, 0, 1, 7, 9.8)\" \u003e\u003cpath  stroke-opacity=\"1\"  stroke-width=\"0\"  stroke=\"#7442D4\"  fill-opacity=\"1\"  fill=\"#7442D4\"  opacity=\"1\"  cursor=\"pointer\"  d=\"M5 0C5 2.761423749153967 2.761423749153968 5 3.061616997868383e-16 5C-2.7614237491539666 5 -4.999999999999999 2.761423749153968 -5 6.123233995736766e-16C-5 -2.7614237491539666 -2.7614237491539684 -4.999999999999999 -9.184850993605148e-16 -5C2.761423749153966 -5 4.999999999999999 -2.7614237491539684 5 -1.2246467991473533e-15\"  class=\"legendItemShape\"   /\u003e\u003cg  fill=\"#606773\"  opacity=\"1\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 11, 0)\"  text-anchor=\"start\"  alignment-baseline=\"middle\"  font-size=\"12\"  class=\"legendItemLabel\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003ecalcium\u003c/text\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003cg class=\"legendItem\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 0, 128)\" \u003e\u003cg class=\"\"  transform=\"matrix(1, 0, 0, 1, 7, 9.8)\" \u003e\u003cpath  stroke-opacity=\"1\"  stroke-width=\"0\"  stroke=\"#FFC400\"  fill-opacity=\"1\"  fill=\"#FFC400\"  opacity=\"1\"  cursor=\"pointer\"  d=\"M5 0C5 2.761423749153967 2.761423749153968 5 3.061616997868383e-16 5C-2.7614237491539666 5 -4.999999999999999 2.761423749153968 -5 6.123233995736766e-16C-5 -2.7614237491539666 -2.7614237491539684 -4.999999999999999 -9.184850993605148e-16 -5C2.761423749153966 -5 4.999999999999999 -2.7614237491539684 5 -1.2246467991473533e-15\"  class=\"legendItemShape\"   /\u003e\u003cg  fill=\"#606773\"  opacity=\"1\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 11, 0)\"  text-anchor=\"start\"  alignment-baseline=\"middle\"  font-size=\"12\"  class=\"legendItemLabel\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003esodium\u003c/text\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003cg class=\"legendItem\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 0, 153.6)\" \u003e\u003cg class=\"\"  transform=\"matrix(1, 0, 0, 1, 7, 9.8)\" \u003e\u003cpath  stroke-opacity=\"1\"  stroke-width=\"0\"  stroke=\"#304D77\"  fill-opacity=\"1\"  fill=\"#304D77\"  opacity=\"1\"  cursor=\"pointer\"  d=\"M5 0C5 2.761423749153967 2.761423749153968 5 3.061616997868383e-16 5C-2.7614237491539666 5 -4.999999999999999 2.761423749153968 -5 6.123233995736766e-16C-5 -2.7614237491539666 -2.7614237491539684 -4.999999999999999 -9.184850993605148e-16 -5C2.761423749153966 -5 4.999999999999999 -2.7614237491539684 5 -1.2246467991473533e-15\"  class=\"legendItemShape\"   /\u003e\u003cg  fill=\"#606773\"  opacity=\"1\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 11, 0)\"  text-anchor=\"start\"  alignment-baseline=\"middle\"  font-size=\"12\"  class=\"legendItemLabel\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003epotassium\u003c/text\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003cg class=\"legendItem\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 0, 179.2)\" \u003e\u003cg class=\"\"  transform=\"matrix(1, 0, 0, 1, 7, 9.8)\" \u003e\u003cpath  stroke-opacity=\"1\"  stroke-width=\"0\"  stroke=\"#B48DEB\"  fill-opacity=\"1\"  fill=\"#B48DEB\"  opacity=\"1\"  cursor=\"pointer\"  d=\"M5 0C5 2.761423749153967 2.761423749153968 5 3.061616997868383e-16 5C-2.7614237491539666 5 -4.999999999999999 2.761423749153968 -5 6.123233995736766e-16C-5 -2.7614237491539666 -2.7614237491539684 -4.999999999999999 -9.184850993605148e-16 -5C2.761423749153966 -5 4.999999999999999 -2.7614237491539684 5 -1.2246467991473533e-15\"  class=\"legendItemShape\"   /\u003e\u003cg  fill=\"#606773\"  opacity=\"1\"  cursor=\"pointer\"  transform=\"matrix(1, 0, 0, 1, 11, 0)\"  text-anchor=\"start\"  alignment-baseline=\"middle\"  font-size=\"12\"  class=\"legendItemLabel\" \u003e\u003ctext  alignment-baseline=\"middle\"\u003eothers\u003c/text\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003cg class=\"undefined_interaction\"  transform=\"matrix(1, 0, 0, 1, 122, 70)\" \u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\n\u003c/svg\u003e\n\u003c/div\u003e\n\n```typescript\nimport VChart from \"@visactor/vchart\";\nimport { convertVChartToSvg } from \"@visactor/vchart-svg-plugin\";\n\nconst spec = {\n  type: \"pie\",\n  data: [\n    {\n      id: \"id0\",\n      values: [\n        { type: \"oxygen\", value: \"46.60\" },\n        { type: \"silicon\", value: \"27.72\" },\n        { type: \"aluminum\", value: \"8.13\" },\n        { type: \"iron\", value: \"5\" },\n        { type: \"calcium\", value: \"3.63\" },\n        { type: \"sodium\", value: \"2.83\" },\n        { type: \"potassium\", value: \"2.59\" },\n        { type: \"others\", value: \"3.5\" },\n      ],\n    },\n  ],\n  outerRadius: 0.8,\n  valueField: \"value\",\n  categoryField: \"type\",\n  title: {\n    visible: true,\n    text: \"Statistics of Surface Element Content\",\n  },\n  legends: {\n    visible: true,\n    orient: \"left\",\n  },\n  label: {\n    visible: true,\n  },\n  tooltip: {\n    mark: {\n      content: [\n        {\n          key: (datum) =\u003e datum[\"type\"],\n          value: (datum) =\u003e datum[\"value\"] + \"%\",\n        },\n      ],\n    },\n  },\n};\n\nconst vchart = new VChart(spec, {\n  dom: \"chart-container\",\n  animation: false, // Note: Do not enable animation, otherwise you need to listen for animation end event before converting to SVG\n});\nvchart.renderSync();\n\nconst svgContent = convertVChartToSvg(vchart);\n```\n\n### node 端渲染\n\n```typescript\nconst VChart = require(\"@visactor/vchart\");\nconst Canvas = require(\"canvas\");\nconst { convertVChartToSvg } = require(\"@visactor/vchart-svg-plugin\");\n\nconst spec = {\n  type: \"pie\",\n  data: [\n    {\n      id: \"id0\",\n      values: [\n        { type: \"oxygen\", value: \"46.60\" },\n        { type: \"silicon\", value: \"27.72\" },\n        { type: \"aluminum\", value: \"8.13\" },\n        { type: \"iron\", value: \"5\" },\n        { type: \"calcium\", value: \"3.63\" },\n        { type: \"sodium\", value: \"2.83\" },\n        { type: \"potassium\", value: \"2.59\" },\n        { type: \"others\", value: \"3.5\" },\n      ],\n    },\n  ],\n  outerRadius: 0.8,\n  valueField: \"value\",\n  categoryField: \"type\",\n  title: {\n    visible: true,\n    text: \"Statistics of Surface Element Content\",\n  },\n  legends: {\n    visible: true,\n    orient: \"left\",\n  },\n  label: {\n    visible: true,\n  },\n  tooltip: {\n    mark: {\n      content: [\n        {\n          key: (datum) =\u003e datum[\"type\"],\n          value: (datum) =\u003e datum[\"value\"] + \"%\",\n        },\n      ],\n    },\n  },\n};\nconst vchart = new VChart(spec, {\n  // Declare the rendering environment used and pass the corresponding rendering environment parameters\n  mode: \"node\",\n  modeParams: Canvas,\n  animation: false,\n});\nvchart.renderSync();\n\nconst svgContent = convertVChartToSvg(vchart);\n```\n\n## 🔗 Related Links\n\n- [Home](https://www.visactor.io/vchart)\n- [VCharts Graph Examples](https://www.visactor.io/vchart/example)\n- [VChart Graph Tutorial](https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide)\n- [VChart Graph 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## 🤝 Contribution [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/visactor/vchart-svg-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 [Contribution Guidelines](./CONTRIBUTING.zh-CN.md).\n\nSmall streams make a river, and rivers flow into the sea!\n\n\u003ca href=\"https://github.com/visactor/vchart-svg-plugin/graphs/contributors\"\u003e\u003cimg src=\"https://contrib.rocks/image?repo=visactor/vchart-svg-plugin\" /\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisactor%2Fvchart-svg-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisactor%2Fvchart-svg-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisactor%2Fvchart-svg-plugin/lists"}