chartIndex

概述

chartIndex 是一种交互组件,用于查看折线图相对于某个时间点的相对趋势。

example
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
paddingLeft: 50,
});
chart.options({
type: 'line',
data: {
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/indices.json',
},
encode: {
x: (d) => new Date(d.Date),
y: 'Close',
color: 'Symbol',
key: 'Symbol',
title: (d) => d.Date.toLocaleString(),
},
axis: {
y: {
title: '↑ Change in price (%)',
labelAutoRotate: false,
},
},
scale: {
y: {
type: 'log',
},
},
label: {
text: 'Symbol',
selector: 'last',
style: {
fontSize: 10,
},
},
interaction: {
chartIndex: {
ruleStroke: '#aaa',
labelDx: 5,
labelTextAlign: 'center',
labelStroke: '#fff',
labelLineWidth: 5,
labelFormatter: (d) => `${d.toLocaleDateString()}`,
},
},
});
chart.render();

使用方式

chartIndex 通过传入 配置项 对交互进行配置

({
type: 'line',
interaction: {
chartIndex: {},
},
});

配置层级

交互可以配置在 Mark 层级:

({
type: 'line',
interaction: { chartIndex: {} },
});

也可以配置在 View 层级,视图上声明的交互会传递给 children 声明的标记,如果该标记有声明对应的交互,就合并;否则不影响。

({
type: 'view',
children: [
{
type: 'line',
interaction: { chartIndex: {} },
},
],
});

配置项

属性描述类型默认值必选
ruleStroke指示线的颜色stringblack
ruleLineWidth指示线宽number1
ruleLineDash虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。ruleLineDash 设为[0,0]的效果为没有描边。[number,number]
ruleStrokeOpacity指示线的透明度number
ruleOpacity整体透明度number
ruleShadowColor指示线阴影颜色string
ruleShadowBlur指示线高斯模糊系数number
ruleShadowOffsetX指示线阴影距图形的水平距离number
ruleShadowOffsetY指示线阴影距图形的垂直距离number
labelFontSize文字大小number
labelFontFamily文字字体string
labelFontWeight字体粗细number
labelLineHeight文字的行高number
labelTextAlign设置文本内容的当前对齐方式center | end | left | right | start
labelTextBaseline设置在绘制文本时使用的当前文本基线top | middle | bottom | alphabetic | hanging
labelFill文字的填充色string
labelFillOpacity文字的填充透明度number
labelStroke文字的描边string
labelLineWidth文字描边的宽度number
labelLineDash描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。labelLineDash 设为[0,0]的效果为没有描边。[number,number]
labelStrokeOpacity描边透明度number
labelOpacity文字的整体透明度number
labelShadowColor文字阴影颜色string
labelShadowBlur文字阴影的高斯模糊系数number
labelShadowOffsetX设置阴影距文字的水平距离number
labelShadowOffsetY设置阴影距文字的垂直距离number
labelDx文字在 x 方向偏移number
labelDy文字在 y 方向偏移number
labelFormatter格式化日期FormatterFunction

示例

指示线和文字

(() => {
const chart = new G2.Chart();
chart.options({
type: 'line',
autoFit: true,
data: {
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/indices.json',
},
encode: {
x: (d) => new Date(d.Date),
y: 'Close',
color: 'Symbol',
key: 'Symbol',
title: (d) => d.Date.toLocaleString(),
},
axis: {
y: {
title: '↑ Change in price (%)',
labelAutoRotate: false,
},
},
scale: {
y: {
type: 'log',
},
},
label: {
text: 'Symbol',
selector: 'last',
style: {
fontSize: 10,
},
},
interaction: {
tooltip: {
crosshairs: false, // 关闭辅助线
},
chartIndex: {
ruleStroke: 'pink',
ruleLineWidth: 8,
ruleLineDash: [4, 8],
ruleShadowColor: 'green',
ruleShadowBlur: 5,
ruleShadowOffsetX: 5,
ruleShadowOffsetY: 5,
ruleOpacity: 0.9,
labelDy: 30,
labelFontSize: 20,
labelTextAlign: 'center',
labelFill: 'red',
labelStroke: 'yellow',
labelLineWidth: 2,
labelFormatter: (d) => `${d.toLocaleDateString()}`,
},
},
});
chart.render();
return chart.getContainer();
})();
上一篇
brushYFilter
下一篇
elementHighlight