G2Plot自定义tooltip的title

需求:
期望移入显示的tooltip可以自定义titleg2-tooltip-list-item

官网链接:https://g2plot.antv.vision/zh/examples/bar/basic#width-ratio

效果如下

在这里插入图片描述

默认显示如下:

在这里插入图片描述
tooltip默认展示的title是我们Y轴对应数据,
默认展示的g2-tooltip-list-item是x轴数据类型名称:x轴对应的数据

用到tooltip相关属性

在这里插入图片描述
在这里插入图片描述

代码如下
import React, { useEffect } from 'react';
import { Bar } from '@antv/g2plot';
import styles from './index.less';

const data = [
  { type: 'a', value: 0.16 },
  { type: 'b', value: 0.125 },
  { type: 'c', value: 0.24 },
  { type: 'c', value: 0.19 },
  { type: 'd', value: 0.22 },
  { type: 'e', value: 0.05 },
  { type: 'f', value: 0.01 },
];

const SalesScore: React.FC = ({ }) => {
  useEffect(() => {
    handleInit();
  }, []);

  const handleInit = () => {
    const TypeBar = new Bar('type-bar', {
      data: data?.reverse(),
      color: '#7BD4E0',
      xField: 'value',
      yField: 'type',
      barWidthRatio: 0.5,
      xAxis: {
        label: {
          autoHide: true,
          autoRotate: false,
        },
      },
      meta: {
        type: {
          alias: '类别',
        },
        sales: {
          alias: '分数',
        },
      },
      tooltip: {
        showTitle: true,
        showMarkers: false,
        customContent: (title: string, items: any) => `<div>
            <div>销售类型${title}</div>
            <li class="g2-tooltip-list-item">
              <span class="g2-tooltip-marker" style="background-color:#7BD4E0;width:0px;height:0px;border-radius:50%;display:inline-block;margin-right:8px;"></span>
              得分:
              <span class="g2-tooltip-value"> ${items?.[0]?.value}</span>
            </li>
          </div>`,
        domStyles: {
          'g2-tooltip': {
            paddingTop: '12px',
          }, // 设置 tooltip 的 css 样式
        },
      },
    });
    TypeBar.render();
  };

  return (
    <div style={{ textAlign: 'center' }}>
      <div id="type-bar"></div>
    </div>
  );
};

export default SalesScore;

注意事项

1.tooltip的formatter属性

格式化 tooltip item 内容(暂时不支持多 tooltipItems 的格式化,可以使用 customContent 处理)

formatter不能修改tooltip title,只能修改-tooltip-list-item的数据

2.tooltip的itle属性

设置 tooltip 的标题内容:如果值为数据字段名,则会展示数据中对应该字段的数值,如果数据中不存在该字段,则直接展示 title 值。

title只能修改tooltip title,并且类型是string,这个值是固定值,设置以后,所有的tooltip的title值都是固定值
在这里插入图片描述

 tooltip: {
        formatter: (datum: Datum) => {
          console.log('datum---', datum);
          return { name: '分数', value: datum.value };
        },
        title: '2222',
        showTitle: true,
      },

3.tooltip的customContent属性

支持自定义模板

核心代码如下:

tooltip: {
        showTitle: true,
        showMarkers: false,
        customContent: (title: string, items: any) => `<div>
            <div>销售类型${title}</div>
            <li class="g2-tooltip-list-item">
              <span class="g2-tooltip-marker" style="background-color:#7BD4E0;width:0px;height:0px;border-radius:50%;display:inline-block;margin-right:8px;"></span>
              得分:
              <span class="g2-tooltip-value"> ${items?.[0]?.value}</span>
            </li>
          </div>`,
        domStyles: {
          'g2-tooltip': {
            paddingTop: '12px',
          }, // 设置 tooltip 的 css 样式
        },
      },
在 antv G2Plot 中,可以通过 `slider` 配置项来自定义缩略轴。具体步骤如下: 1. 在 G2Plot 中启用缩略轴,使用 `slider: true` 配置项。 2. 使用 `slider: {}` 配置项来自定义缩略轴,其中包括以下常用配置: - `start`: 缩略轴的起始位置,一般为 0。 - `end`: 缩略轴的结束位置,一般为 1。 - `height`: 缩略轴的高度。 - `xAxis`: 缩略轴的 X 轴配置项,包括 `type`、`grid` 等。 - `yAxis`: 缩略轴的 Y 轴配置项,包括 `type`、`grid` 等。 - `backgroundStyle`: 缩略轴的背景样式,包括 `fill`、`fillOpacity` 等。 - `data`: 缩略轴的数据,一般为原始数据的子集。 例如,下面是一个简单的自定义缩略轴的示例代码: ```javascript import { Line } from '@antv/g2plot'; const data = [ { year: '1991', value: 3 }, { year: '1992', value: 4 }, { year: '1993', value: 3.5 }, { year: '1994', value: 5 }, { year: '1995', value: 4.9 }, { year: '1996', value: 6 }, { year: '1997', value: 7 }, { year: '1998', value: 9 }, { year: '1999', value: 13 }, ]; const linePlot = new Line('container', { data, xField: 'year', yField: 'value', slider: { start: 0, end: 0.5, height: 26, xAxis: { type: 'time', grid: null, }, yAxis: { grid: null, }, backgroundStyle: { fill: '#f5f5f5', fillOpacity: 0.9, }, data: data.slice(0, 4), }, }); linePlot.render(); ``` 在上述代码中,我们使用 `slider` 配置项来自定义缩略轴,其中: - `start` 和 `end` 分别为缩略轴的起始位置和结束位置,这里设置为 0 和 0.5。 - `height` 为缩略轴的高度,这里设置为 26。 - `xAxis` 和 `yAxis` 分别为缩略轴的 X 轴和 Y 轴配置项,这里设置为时间轴和无网格线。 - `backgroundStyle` 为缩略轴的背景样式,这里设置为浅灰色。 - `data` 为缩略轴的数据,这里设置为原始数据的前四个点。 你可以根据实际需求修改以上配置项来自定义缩略轴。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值