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.

English| 简体中文

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

# npm
$ npm install @visactor/vchart-svg-plugin

# yarn
$ yarn add @visactor/vchart-svg-plugin

📊 A Simple Chart

Statistics of Surface Element Contentoxygensiliconaluminumironcalciumsodiumpotassiumothersoxygensiliconaluminumironcalciumsodiumpotassiumothers

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 端渲染

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
• VCharts Graph Examples
• VChart Graph Tutorial
• VChart Graph Configuration Options
• VChart API
• VGrammar
• VRender
• FAQ
• CodeSandbox Template for submitting bugs

🤝 Contribution

If you would like to contribute, please read the Code of Conduct and Contribution Guidelines.

Small streams make a river, and rivers flow into the sea!