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

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 | 指示线的颜色 | string | black | |
ruleLineWidth | 指示线宽 | number | 1 | |
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