版本为 4.x.x

图表 Chart 配置

简介

G2 的 View 是图层容器的概念，每一个 View 拥有自己独立的数据源、坐标系、几何标记、Tooltip 以及图例，可以理解 View 是整个 G2 体系中，用来组装数据，Component，Geometry 的容器。一个 View 可以包含有多个子 View，通过这种嵌套关系，可以将一个画布按照不同的布局划分多个不同区域（分面），也可以将不同数据源的多个 View 叠加到一起，形成一个多数据源，多图层的图表。

而 Chart 是继承自 View，用于提供创建 canvas、已经自适应图表大小等能力，便于开发者使用的类。

下面会介绍如何创建 Chart 对象，以及 Chart 对象体提供一些 API，包括通用 API、生命周期 API 以及 View 管理 API 等。

// 导出 Chart 类，是使用 G2 进行绘图的入口。
import { Chart } from '@antv/g2';

// 创建 Chart 图表对象 new Chart(params: ChartCfg) => View;
const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 100,
});

Chart 配置

ChartCfg.container

string | HTMLElement

指定 chart 绘制的 DOM，可以传入 DOM id，也可以直接传入 dom 实例。

ChartCfg.autoFit

boolean default: false

图表是否自适应容器宽高，默认为 false，用户需要手动设置 width 和 height。当 autoFit: true 时，会自动取图表容器的宽高。

ChartCfg.width

number

图表宽度。 autoFit 为 true 时失效。

ChartCfg.height

number

图表高度。 autoFit 为 true 时失效。

ChartCfg.padding

'auto' | number | number[] default: 'auto'

设置图表的内边距，使用方式参考 CSS 盒模型。 'auto' 表示通过 scrollbar 等自适应

ChartCfg.appendPadding

'auto' | number | number[]

图表的内边距会在图表的 padding 的基础上加上 appendPadding，使用方式参考 CSS 盒模型。可以处理 label 超出图表的情况，因为 label 不占体积，不会让 padding 自适应。

ChartCfg.defaultInteractions

string[] default: ['tooltip', 'legend-filter', 'legend-active', 'continuous-filter', 'ellipsis-text']

配置图表默认交互，仅支持字符串形式。G2 默认支持的交互有 'tooltip', 'legend-filter', 'legend-active', 'continuous-filter', 'ellipsis-text'，除了这些，还可以通过 registerAction 自定义交互类型。

默认交互	描述	效果展示
tooltip	鼠标在 chart 上移动时显示提示信息
legend-active	鼠标移动到图例选项时，图例项高亮，对应的图形高亮
legend-filter	分类图例的勾选
continuous-filter	连续图例的过滤
ellipsis-text	当文本过长被省略时，鼠标 hover 到文本时会自动展示 Tooltip，显示出完整的文本名

ChartCfg.limitInPlot

boolean default: false

是否对超出坐标系范围的 Geometry 进行剪切。当因为固定了最小值/最大值等原因，导致部分的 Geometry 超出了坐标系从而影响了其他内容的展示，可以开启。

ChartCfg.pixelRatio

number default: window.devicePixelRatio

设置设备像素比，默认取浏览器的值 window.devicePixelRatio。

ChartCfg.renderer

'canvas' | 'svg' default: 'canvas'

指定渲染引擎，默认使用 canvas。

ChartCfg.theme

ThemObject | string

配置主题，目前 g2 默认有 dark 主题模式，如需要自定义配置，可以先通过 registerTheme 注册主题，再设置主题 key。

// 方法一：
new Chart({ theme: 'dark' })

// 方法二:
new Chart({ theme: { background: 'red' } });

// 方法三:
registerTheme('customTheme', { defaultColor: 'red', });

new Chart({ theme: 'customTheme', });

主题属性	类型	描述
background	string	背景色
defaultColor	string	主题色
padding	number	number[]
fontFamily	string	图表字体
colors10	string[]	分类颜色色板，分类个数小于 10 时使用
colors20	string[]	分类颜色色板，分类个数大于 10 时使用
columnWidthRatio	number	一般柱状图宽度占比，0 - 1 范围数值
maxColumnWidth	number	柱状图最大宽度，像素值
minColumnWidth	number	柱状图最小宽度，像素值
roseWidthRatio	number	玫瑰图占比，0 - 1 范围数值
multiplePieWidthRatio	number	多层饼图/环图占比，0 - 1 范围数值
geometries	object**	配置每个 Geometry 下每个 shape 的样式，包括默认样式以及各个状态下的样式
components	object	配置坐标轴，图例，tooltip, annotation 的主题样式
labels	object	配置 Geometry 下 label 的主题样式
innerLabels	object	配置 Geometry 下展示在图形内部的 labels 的主题样式
pieLabels	object	配置饼图 labels 的主题样式

theme: {
  // geometries 示例
  geometries: {
    interval: {
      // 适用于 column、bar 和 pie 等
      rect: {
        default: {
          style: {
            stroke: '#000',
          },
        },
        active: {
          style: {
            stroke: '#fff',
          },
        },
        selected: {
          style: {
            stroke: '#fff',
          },
        },
      },
    },
  },
  // components 示例
  components: {
    axis: {
      common: {
        label: {
          style: {
            fill: 'rgba(255,255,255,0.65)',
          },
        },
        line: {
          style: {
            stroke: 'rgba(255,255,255,0.25)',
          },
        },
        grid: {
          line: {
            style: {
              stroke: 'rgba(255,255,255,0.15)',
            },
          },
        },
      },
    },
    legend: {
      common: {
        itemName: {
          style: {
            fill: 'rgba(255,255,255,0.65)',
          },
        },
        itemValue: {
          style: {
            fill: 'rgba(255,255,255,0.65)',
          },
        },
        radio: {
          style: {
            stroke: '#fff',
            fill: 'transparent',
          },
        },
      },
    },
    annotation: {
      text: {
        style: {
          stroke: '#fff',
        },
      },
      region: {
        style: {
          fill: '#363636',
        },
      },
    },
  },     
}

ChartCfg.visible

boolean default: true

chart 是否可见，默认为 true，设置为 false 则会隐藏。

ChartCfg.localRefresh

boolean default: true

chart 是否开启局部刷新。

ChartCfg.syncViewPadding

boolean

是否同步子 view 的 padding。

ChartCfg.supportCSSTransform