G2

概述

lineY和lineY图形标记配置相似，lineY图形标记用于绘制垂直于 y 轴的辅助线，常用于绘制平均值或其他聚合数据辅助线。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'view',
  height: 200,
  autoFit: true,
  children: [
    {
      type: 'interval',
      data: [
        { year: '1951 年', sales: 38 },
        { year: '1952 年', sales: 52 },
        { year: '1956 年', sales: 61 },
        { year: '1957 年', sales: 120 },
        { year: '1958 年', sales: 48 },
        { year: '1959 年', sales: 38 },
      ],
      encode: { x: 'year', y: 'sales' },
    },
    {
      type: 'lineY',
      data: [100, 59],
      style: {
        stroke: (v) => {
          if (v >= 60) {
            return 'green';
          } else {
            return 'red';
          }
        },
        lineWidth: 2,
      },
      labels: [
        // 文本具体配置可以参考 mark text
        {
          text: (v) => (v >= 60 ? 'lineY 分割线1' : 'lineY 分割线2'),
          position: 'top-right',
          textBaseline: 'bottom',
          fill: '#000',
          fillOpacity: 0.45,
          background: true,
          backgroundFill: '#000',
          backgroundOpacity: 0.15,
        },
      ],
    },
  ],
});

chart.render();

更多的案例，可以查看图表示例 - 线标注页面。

配置项

属性	描述	类型	默认值	必选
encode	配置 `lineY` 标记的视觉通道，包括`y`、`color`等，用于指定视觉元素属性和数据之间的关系	encode	-	✓
style	配置 `lineY` 标记的图形样式	style	-

encode

配置 lineY 标记的视觉通道。

属性	描述	类型	默认值	必选
x	绑定 `lineY` 标记的 `y` 属性通道。不需要 `x` 属性通道，可以直接 data([1,...]) 配置数据，会自动配置到 `y`通道。或者配合 transform 来计算原始数据的平均值(mean)或中位数(median)，从而不用自己计算来自动自动绘画平均线或中位线	encode	-
color	绑定 `lineY` 标记的 `color` 属性通道，如果将数据字段映射到颜色通道，会对数据进行分组，将数据拆分成多个不同颜色的区域	encode	-

尝试一下：

style

属性	描述	类型	默认值
stroke	图形的描边	string \| Function<string>	-
strokeOpacity	描边透明度	number \| Function<number>	-
lineWidth	图形描边的宽度	number \| Function<number>	-
lineDash	描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。	[number,number] \| Function<[number, number]>	-
opacity	图形的整体透明度	number \| Function<number>	-
shadowColor	图形阴影颜色	string \| Function<string>	-
shadowBlur	图形阴影的高斯模糊系数	number \| Function<number>	-
shadowOffsetX	设置阴影距图形的水平距离	number \| Function<number>	-
shadowOffsetY	设置阴影距图形的垂直距离	number \| Function<number>	-
cursor	鼠标样式。同 css 的鼠标样式，默认 'default'。	string \| Function<string>	`default`

概述

lineY和lineY图形标记配置相似，lineY图形标记用于绘制垂直于 y 轴的辅助线，常用于绘制平均值或其他聚合数据辅助线。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'view',
  height: 200,
  autoFit: true,
  children: [
    {
      type: 'interval',
      data: [
        { year: '1951 年', sales: 38 },
        { year: '1952 年', sales: 52 },
        { year: '1956 年', sales: 61 },
        { year: '1957 年', sales: 120 },
        { year: '1958 年', sales: 48 },
        { year: '1959 年', sales: 38 },
      ],
      encode: { x: 'year', y: 'sales' },
    },
    {
      type: 'lineY',
      data: [100, 59],
      style: {
        stroke: (v) => {
          if (v >= 60) {
            return 'green';
          } else {
            return 'red';
          }
        },
        lineWidth: 2,
      },
      labels: [
        // 文本具体配置可以参考 mark text
        {
          text: (v) => (v >= 60 ? 'lineY 分割线1' : 'lineY 分割线2'),
          position: 'top-right',
          textBaseline: 'bottom',
          fill: '#000',
          fillOpacity: 0.45,
          background: true,
          backgroundFill: '#000',
          backgroundOpacity: 0.15,
        },
      ],
    },
  ],
});

chart.render();

更多的案例，可以查看图表示例 - 线标注页面。

配置项

属性	描述	类型	默认值	必选
encode	配置 `lineY` 标记的视觉通道，包括`y`、`color`等，用于指定视觉元素属性和数据之间的关系	encode	-	✓
style	配置 `lineY` 标记的图形样式	style	-

encode

配置 lineY 标记的视觉通道。

属性	描述	类型	默认值	必选
x	绑定 `lineY` 标记的 `y` 属性通道。不需要 `x` 属性通道，可以直接 data([1,...]) 配置数据，会自动配置到 `y`通道。或者配合 transform 来计算原始数据的平均值(mean)或中位数(median)，从而不用自己计算来自动自动绘画平均线或中位线	encode	-
color	绑定 `lineY` 标记的 `color` 属性通道，如果将数据字段映射到颜色通道，会对数据进行分组，将数据拆分成多个不同颜色的区域	encode	-

尝试一下：

style

属性	描述	类型	默认值
stroke	图形的描边	string \| Function<string>	-
strokeOpacity	描边透明度	number \| Function<number>	-
lineWidth	图形描边的宽度	number \| Function<number>	-
lineDash	描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。	[number,number] \| Function<[number, number]>	-
opacity	图形的整体透明度	number \| Function<number>	-
shadowColor	图形阴影颜色	string \| Function<string>	-
shadowBlur	图形阴影的高斯模糊系数	number \| Function<number>	-
shadowOffsetX	设置阴影距图形的水平距离	number \| Function<number>	-
shadowOffsetY	设置阴影距图形的垂直距离	number \| Function<number>	-
cursor	鼠标样式。同 css 的鼠标样式，默认 'default'。	string \| Function<string>	`default`