VGrammar

VGrammar，不只是生成万千图表的可视化语法，更是化枯燥为神奇的数据魔法师。

简介 • Demo • 教程 • API• 配置

English | 简体中文 | 日本語

（演示视频）

简介

VGrammar 是 VisActor 可视化体系中的可视化语法库，基于可视化渲染引擎 VRender 进行组件封装。核心能力如下：

1. 默认好用：语法简洁，接口完备，组件丰富，开发简单；
2. 能力丰富：图表定义，动画编排，艺术表达，完整覆盖；
3. 灵活扩展：图元渲染，数据映射，自动布局，轻松扩展；

仓库简介

本仓库包含如下 package

1. VGrammar: 图形语法

使用

安装

npm package

// npm
npm install @visactor/vgrammar

// yarn
yarn add @visactor/vgrammar

快速上手

import { View } from '@visactor/vgrammar';

const spec = {
  data: [
    {
      id: 'table',
      values: [
        {
          value: 3676,
          name: ' ~ 29'
        },
        {
          value: 3872,
          name: '30 ~ 39'
        },
        {
          value: 1668,
          name: '40 ~ 49'
        },
        {
          value: 610,
          name: '50 ~'
        }
      ]
    },
    {
      id: 'pie',
      source: 'table',
      transform: [
        {
          type: 'pie',
          field: 'value',
          asStartAngle: 'startAngle',
          asEndAngle: 'endAngle'
        }
      ]
    }
  ],

  scales: [
    {
      id: 'colorScale',
      type: 'ordinal',
      domain: { data: 'table', field: 'name' },
      range: [
        '#6690F2',
        '#70D6A3',
        '#B4E6E2',
        '#63B5FC',
        '#FF8F62',
        '#FFDC83',
        '#BCC5FD',
        '#A29BFE',
        '#63C4C7',
        '#F68484'
      ]
    }
  ],

  marks: [
    {
      type: 'arc',
      from: { data: 'pie' },
      dependency: ['viewBox', 'colorScale'],
      encode: {
        update: (datum, element, params) => {
          const viewBox = params.viewBox;
          const maxR = Math.min(viewBox.width() / 2, viewBox.height() / 2);
          return {
            x: viewBox.x1 + viewBox.width() / 2,
            y: viewBox.y1 + viewBox.height() / 2,
            startAngle: datum.startAngle,
            endAngle: datum.endAngle,
            innerRadius: 100,
            outerRadius: maxR,
            fill: params.colorScale.scale(datum.name)
          };
        },
        hover: {
          fill: 'red'
        }
      }
    }
  ]
};

const vGrammarView = new View({
  autoFit: true,
  container: 'chart',
  hover: true
});
vGrammarView.parseSpec(spec);

vGrammarView.runAsync();

更多 demo 和详细教程

相关链接

• 官网

生态

| VChart | 基于 VisActor/VGrammar 封装的图表库。 | | React 组件库 | 基于 VisActor/VChart 的 React 图表 组件库。 | | 智能生成组件 | 基于 AI 的智能图表生成组件 |

参与贡献

如想参与贡献，请先阅读 行为准则 和 贡献指南。

细流成河，终成大海！

许可证

MIT 协议