@visactor/vchart-svg-plugin
v0.0.2
Published
<div align="center"> <a href="https://github.com/VisActor#gh-light-mode-only" target="_blank"> <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg"/> </a> <a href="https://github
Downloads
9
Maintainers
Keywords
Readme
vchart-svg-plugin 是 vchart 插件,用于将 vchart 渲染后的内容转换成 svg,方便在打印、SSR 等环境下使用
English | 简体中文
简介
VChart 是 VisActor 可视化体系中的图表组件库,基于 vchart-svg-plugin,可以轻松的将图表转换成 svg 文件
🔨 使用
📦 安装
# npm
$ npm install @visactor/vchart-svg-plugin
# yarn
$ yarn add @visactor/vchart-svg-plugin
📊 一个简单的图表
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, // 注意,不要开启动画,不然需要监听动画结束事件,再进行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, {
// 声明使用的渲染环境以及传染对应的渲染环境参数
mode: "node",
modeParams: Canvas,
animation: false,
});
vchart.renderSync();
const svgContent = convertVChartToSvg(vchart);
🔗 相关链接
🤝 参与贡献
细流成河,终成大海!