https://github.com/visactor/vchart-svg-plugin
https://github.com/visactor/vchart-svg-plugin
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/visactor/vchart-svg-plugin
- Owner: VisActor
- Created: 2024-08-13T01:49:50.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-20T01:05:52.000Z (over 1 year ago)
- Last Synced: 2025-05-04T04:32:44.556Z (8 months ago)
- Language: TypeScript
- Size: 126 KB
- Stars: 4
- Watchers: 12
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
vchart-svg-plugin
vchart-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.
[](https://www.npmjs.com/package/@visactor/vchart-svg-plugin)
[](https://www.npmjs.com/package/@visactor/vchart-svg-plugin)
[](https://github.com/visactor/vchart-svg-plugin/blob/main/CONTRIBUTING.md#your-first-pull-request)
 [](https://github.com/visactor/vchart-svg-plugin/blob/main/LICENSE)
English| [įŽäŊä¸æ](./README.zh-CN.md)
## Introduction
VChart is a chart component library in the VisActor visualization system, based on vchart-svg-plugin, which can easily convert charts into SVG files.
## đ¨ Usage
### đĻ Installation
```bash
# npm
$ npm install @visactor/vchart-svg-plugin
# yarn
$ yarn add @visactor/vchart-svg-plugin
```
### đ A Simple Chart
Statistics of Surface Element Contentoxygensiliconaluminumironcalciumsodiumpotassiumothersoxygensiliconaluminumironcalciumsodiumpotassiumothers
```typescript
import VChart from "@visactor/vchart";
import { convertVChartToSvg } from "@visactor/vchart-svg-plugin";
const spec = {
type: "pie",
data: [
{
id: "id0",
values: [
{ type: "oxygen", value: "46.60" },
{ type: "silicon", value: "27.72" },
{ type: "aluminum", value: "8.13" },
{ type: "iron", value: "5" },
{ type: "calcium", value: "3.63" },
{ type: "sodium", value: "2.83" },
{ type: "potassium", value: "2.59" },
{ type: "others", value: "3.5" },
],
},
],
outerRadius: 0.8,
valueField: "value",
categoryField: "type",
title: {
visible: true,
text: "Statistics of Surface Element Content",
},
legends: {
visible: true,
orient: "left",
},
label: {
visible: true,
},
tooltip: {
mark: {
content: [
{
key: (datum) => datum["type"],
value: (datum) => datum["value"] + "%",
},
],
},
},
};
const vchart = new VChart(spec, {
dom: "chart-container",
animation: false, // Note: Do not enable animation, otherwise you need to listen for animation end event before converting to SVG
});
vchart.renderSync();
const svgContent = convertVChartToSvg(vchart);
```
### node įĢ¯æ¸˛æ
```typescript
const VChart = require("@visactor/vchart");
const Canvas = require("canvas");
const { convertVChartToSvg } = require("@visactor/vchart-svg-plugin");
const spec = {
type: "pie",
data: [
{
id: "id0",
values: [
{ type: "oxygen", value: "46.60" },
{ type: "silicon", value: "27.72" },
{ type: "aluminum", value: "8.13" },
{ type: "iron", value: "5" },
{ type: "calcium", value: "3.63" },
{ type: "sodium", value: "2.83" },
{ type: "potassium", value: "2.59" },
{ type: "others", value: "3.5" },
],
},
],
outerRadius: 0.8,
valueField: "value",
categoryField: "type",
title: {
visible: true,
text: "Statistics of Surface Element Content",
},
legends: {
visible: true,
orient: "left",
},
label: {
visible: true,
},
tooltip: {
mark: {
content: [
{
key: (datum) => datum["type"],
value: (datum) => datum["value"] + "%",
},
],
},
},
};
const vchart = new VChart(spec, {
// Declare the rendering environment used and pass the corresponding rendering environment parameters
mode: "node",
modeParams: Canvas,
animation: false,
});
vchart.renderSync();
const svgContent = convertVChartToSvg(vchart);
```
## đ Related Links
- [Home](https://www.visactor.io/vchart)
- [VCharts Graph Examples](https://www.visactor.io/vchart/example)
- [VChart Graph Tutorial](https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide)
- [VChart Graph Configuration Options](https://www.visactor.io/vchart/option/)
- [VChart API](https://www.visactor.io/vchart/api/API/vchart)
- [VGrammar](https://www.visactor.io/vgrammar)
- [VRender](https://www.visactor.io/vrender)
- [FAQ](https://www.visactor.io/vchart/guide/tutorial_docs/FAQ)
- [CodeSandbox Template](https://codesandbox.io/s/the-template-of-visactor-vchart-vl84ww?file=/src/index.ts) for submitting bugs
## đ¤ Contribution [](https://github.com/visactor/vchart-svg-plugin/blob/main/CONTRIBUTING.md#your-first-pull-request)
If you would like to contribute, please read the [Code of Conduct](./CODE_OF_CONDUCT.md) and [Contribution Guidelines](./CONTRIBUTING.zh-CN.md).
Small streams make a river, and rivers flow into the sea!
