AntV Infographic
Home
Learn
Reference
Gallery
Icon
Editor
AI
Enterprise

目录

  • Overview
  • 安装
  • 使用
  • 在 HTML 中使用
  • 在 React 中使用
  • 在 Vue 中使用
  • 快速开始
    • 入门指南
    • 信息图语法
  • 核心概念
    • 设计
    • 模版
    • 数据
    • 主题
    • 资源
  • 自定义设计
    • 自定义结构
    • 自定义数据项
    • 自定义模版
    • 自定义主题
    • 自定义色板
    • 自定义字体
    • 自定义资源加载器
    • 自定义图案
  • 信息图理论
    • 信息图分类
    • 核心理论
    • 信息图构成要素
    • 信息图设计
  • 参与贡献
文档

快速开始

安装

通过 npm 安装 @antv/infographic：

BASH
npm install @antv/infographic --save

使用

下面的示例展示如何实例化并渲染一张列表型信息图：

关键配置说明：

  • container：渲染容器的选择器或节点
  • width / height：信息图宽高，可用百分比或像素
  • syntax：信息图语法

在 HTML 中使用

也可以通过 CDN 直接在 HTML 中引入：

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Infographic Demo</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
    <script>
      const {Infographic} = AntVInfographic;
      const infographic = new Infographic({
        container: '#container',
        width: '100%',
        height: '100%',
      });

      const syntax = `
        infographic list-row-simple-horizontal-arrow
        data
          items
            - label 步骤 1
              desc 开始
            - label 步骤 2
              desc 进行中
            - label 步骤 3
              desc 完成
        `;

      infographic.render(syntax);
    </script>
  </body>
</html>

在 React 中使用

在 React 中，可在 useEffect 中创建实例并挂载到 ref：

JSX
import React, {useEffect, useRef} from 'react';
import {Infographic} from '@antv/infographic';

export function App() {
  const containerRef = useRef(null);

  useEffect(() => {
    const infographic = new Infographic({
      container: containerRef.current,
      width: '100%',
      height: '100%',
    });

    infographic.render(`
      infographic list-row-simple-horizontal-arrow
          data
            items
              - label 步骤 1
                desc 开始
              - label 步骤 2
                desc 进行中
              - label 步骤 3
                desc 完成
    `);

    return () => {
      infographic.destroy();
    };
  }, []);

  return <div ref={containerRef} />;
}

在 Vue 中使用

在 Vue 3 中，可在 onMounted 生命周期中创建实例并挂载到 ref：

VUE
<template>
  <div ref="containerRef"></div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue';
import {Infographic} from '@antv/infographic';

const containerRef = ref(null);
let infographic = null;

onMounted(() => {
  infographic = new Infographic({
    container: containerRef.value,
    width: '100%',
    height: '100%',
  });

  infographic.render(`
    infographic list-row-simple-horizontal-arrow
    data
      items
        - label 步骤 1
          desc 开始
        - label 步骤 2
          desc 进行中
        - label 步骤 3
          desc 完成
  `);
});

onBeforeUnmount(() => {
  if (infographic) {
    infographic.destroy();
  }
});
</script>
Next入门指南
AntV Infographic
Copyright © Ant Group Co.
Docs
Quick Start
Core Concepts
Custom Design
Infographic Theory
API Reference
JSX
API
Design Assets
More
More Examples
AI Generated Infographics
GitHub
Contribute
Friendly Links
AntV
G2
G6
L7
BASH
npm install @antv/infographic --save
HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Infographic Demo</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
    <script>
      const {Infographic} = AntVInfographic;
      const infographic = new Infographic({
        container: '#container',
        width: '100%',
        height: '100%',
      });

      const syntax = `
        infographic list-row-simple-horizontal-arrow
        data
          items
            - label 步骤 1
              desc 开始
            - label 步骤 2
              desc 进行中
            - label 步骤 3
              desc 完成
        `;

      infographic.render(syntax);
    </script>
  </body>
</html>
JSX
import React, {useEffect, useRef} from 'react';
import {Infographic} from '@antv/infographic';

export function App() {
  const containerRef = useRef(null);

  useEffect(() => {
    const infographic = new Infographic({
      container: containerRef.current,
      width: '100%',
      height: '100%',
    });

    infographic.render(`
      infographic list-row-simple-horizontal-arrow
          data
            items
              - label 步骤 1
                desc 开始
              - label 步骤 2
                desc 进行中
              - label 步骤 3
                desc 完成
    `);

    return () => {
      infographic.destroy();
    };
  }, []);

  return <div ref={containerRef} />;
}
VUE
<template>
  <div ref="containerRef"></div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue';
import {Infographic} from '@antv/infographic';

const containerRef = ref(null);
let infographic = null;

onMounted(() => {
  infographic = new Infographic({
    container: containerRef.value,
    width: '100%',
    height: '100%',
  });

  infographic.render(`
    infographic list-row-simple-horizontal-arrow
    data
      items
        - label 步骤 1
          desc 开始
        - label 步骤 2
          desc 进行中
        - label 步骤 3
          desc 完成
  `);
});

onBeforeUnmount(() => {
  if (infographic) {
    infographic.destroy();
  }
});
</script>