mx52jing

Appearance

Return to top
On this page

AntV F2 使用小记

设置Tooltip

typescript
// 关闭或启用 Tooltip enable 是否启用
tooltip(enable: boolean): this;
// 配置 Tooltip
tooltip(params: TooltipParams<TRecord>): this;

常用属性如下：

javascript
chart.tooltip({
    showCrosshairs: true, // 展示辅助线
    showTitle: true, // 展示title
    triggerOn: ['touchstart', 'touchmove'], // tooltip 出现的触发行为，可自定义，用法同 legend 的 triggerOn
    triggerOff: 'touchend', // tooltip 消失的触发行为，可自定义
    layout: 'vertical', // tooltip内 内容垂直显示
    onChange: function (ev) { // 修改tooltip内展示的内容，当前数据可通过ev.items获取，如果只有一条线取ev.items[0]
        ev.items.forEach(j => {
            j.name = `${j.origin?.itemName}`;
            j.value = `${j.origin?.value}${j.origin?.amountUnit}`;
        });
    },
    // 设置tooltip弹出窗的样式
    background: {
        padding: 10, // 设置padding
        radius: 4 // 设置 border-radius
    }
});

设置坐标轴文案对齐方式

javascript
chart.axis('date', {
	label: function label(text, index, total) {
		const textCfg = {};
		if (index === 0) { // 坐标轴第一个就左边对齐
			textCfg.textAlign = 'left';
		} else if (index === total - 1) {
			textCfg.textAlign = 'right';
		}
		return textCfg;
	}
});

柱状图

设置柱状图堆叠方式

  • 使用adjust方法来设置柱状图堆叠方式，可用于绘制层叠图、分组图，方法详情如下：
typescript
adjust(kind: GeometryAdjustKind): this;
adjust(params: GeometryAdjustParams | GeometryAdjustParams[]): this;
  • GeometryAdjustKind类型如下：
typescript
export type GeometryAdjustKind = 
    // 堆叠
	| 'stack'
	// 分组
	| 'dodge'
	// 对称
	| 'symmetric';
  • GeometryAdjustParams类型入下：
typescript
export interface GeometryAdjustParams {
  // 堆叠方式 
  type: GeometryAdjustKind;
  /**
   * 数值范围为 0 至 1，用于调整分组中各个柱子的间距。
   * 试着设置了没什么用
   */
  marginRatio?: number;
}

TIP

marginRatio属性试着设置了，但是没起到效果，设置各个柱子的间隔可以使用F2.Global.widthRatio.column = 1来设置，参考链接在这里

F2.Global.widthRatio.column = 1设置后效果如下： 间隔为1