Awesome
<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.com/VisActor#gh-dark-mode-only" target="_blank"> <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_dark.svg"/> </a> </div> <div align="center"> <h1>univer-vchart-plugin</h1> </div> <div align="center">The vchart univer plugin encapsulates the capability to create chart overlays within Univer.
</div> <div align="center">English | įŽäŊä¸æ
</div>Introduction
VChart is a chart component library within the VisActor visualization system. Univer is an open-source Office suite. Using the univer-vchart-plugin, you can easily create chart overlays.
đ¨ Usage
đĻ Installation
# npm
$ npm install @visactor/univer-vchart-plugin
# pnpm
$ pnpm add @visactor/univer-vchart-plugin
đ A Simple Chart
<img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/univer-vchart-plugin.png" style="width: 800px">import {
UniverVChartPlugin,
CREATE_VCHART_COMMAND_ID,
} from "@visactor/univer-vchart-plugin";
export function setupUniver() {
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: enUS,
},
});
univer.registerPlugin(UniverVChartPlugin);
}
export function setupVChartDemo($toolbar: HTMLElement, univerAPI: FUniver) {
const $button = document.createElement("a");
$button.textContent = "Create vchart demo";
$toolbar.appendChild($button);
$button.addEventListener("click", async () => {
if (!univerAPI) throw new Error("univerAPI is not defined");
const activeWorkbook = univerAPI.getActiveWorkbook();
if (!activeWorkbook) throw new Error("activeWorkbook is not defined");
const activeSheet = activeWorkbook.getActiveSheet();
if (!activeSheet) throw new Error("activeSheet is not defined");
await univerAPI.executeCommand(CREATE_VCHART_COMMAND_ID, {
spec: {
type: "line",
data: {
values: [
{
time: "2:00",
value: 8,
},
{
time: "4:00",
value: 9,
},
{
time: "6:00",
value: 11,
},
{
time: "8:00",
value: 14,
},
{
time: "10:00",
value: 16,
},
{
time: "12:00",
value: 17,
},
{
time: "14:00",
value: 17,
},
{
time: "16:00",
value: 16,
},
{
time: "18:00",
value: 15,
},
],
},
xField: "time",
yField: "value",
},
});
});
}
đ Related Links
- Homepage
- VCharts Chart Examples
- VChart Chart Tutorial
- VChart Chart Configuration Options
- VChart API
- VGrammar
- VRender
- FAQ
- CodeSandbox Template for submitting bugs
đ¤ Contributing
If you would like to contribute, please read the Code of Conduct and the Contribution Guide first.
Small streams make big rivers!
<a href="https://github.com/visactor/univer-vchart-plugin/graphs/contributors"><img src="https://contrib.rocks/image?repo=visactor/univer-vchart-plugin" /></a>