Antv G2Plot Custominfo——定制你的图表提示信息

Antv G2Plot是一个基于Antv G2的封装，用于可视化的绘图库，可以结合 React/Vue 性能优化，提供丰富的图表类型、交互、动画等扩展功能。本文主要介绍如何通过定制 Custominfo 功能来自定义图表提示信息。

一、Custominfo 是什么？

Custominfo 是 Antv G2Plot 中的一个定制提示信息的功能。在绘制图表时，我们经常会需要在鼠标悬停在某个数据点或者某个区域时，显示一些相关信息来帮助用户更好地理解数据。G2Plot 中提供了一套默认的提示信息样式，但我们通常需要对其进行定制，例如：增加自定义字段、修改展示样式等。这时候 custominfo 就可以帮助我们完成这些需求。

二、如何使用 Custominfo？

在 Antv G2Plot 中使用 Custominfo 非常简单，只需要在指定的图表类型中调用 custominfo() 方法即可。方法原型如下：

{
  custominfo: (parameter: CustomInfoConfig) => CustomInfoCfg
}

上述方法接收一个 CustomInfoConfig 类型参数，该类型定义了一些用于定制提示信息的属性。接下来，我们将结合代码示例来介绍其用法。

三、示例代码

柱状图 Custominfo 示例

柱状图 Custominfo 功能可以在用户鼠标移至某个柱子时，以卡片形式展示对应的数据信息。我们可以通过自定义内容模板、修改样式等方式来定制卡片颜色、大小、显示字段等。

代码如下：

{
import { Bar } from '@antv/g2plot';


const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 45 },
  { year: '1958 年', sales: 48 },
];

const customInfo = (title: string, items: { name: string; value: string }[]) => {
  const htmlStrs: string[] = [];
  htmlStrs.push('<div class="popover-title">' + title + '</div>');
  items.forEach((item) => {
    htmlStrs.push('<div class="popover-content">');
    htmlStrs.push('<span class="color-box" style="background-color:' + item.color + '"></span>');
    htmlStrs.push('<span class="name">' + item.name + '</span>');
    htmlStrs.push('<span class="value">' + item.value + '</span>');
    htmlStrs.push('</div>');
  });
  return htmlStrs.join('');
};

const barPlot = new Bar('container', {
  data,
  xField: 'year',
  yField: 'sales',
  meta: {
    year: {
      range: [0, 1],
    },
  },
  padding: 'auto',
  label: {},
  customInfo: ({ x, y, data: item }) => {
    return {
      title: '<span style="font-Size: 18px">' + item.year + '</span>',
      items: [
        {
          name: '销售额',
          value: item.sales,
          color: '#5B8FF9',
        },
      ],
      htmlContent: customInfo(
        '<span style="font-Size: 18px">' + item.year + '</span>',
        [{ name: '销售额', value: item.sales }]
      ),
      x,
      y,
    };
  },
});

barPlot.render();
}

折线图 Custominfo 示例

折线图 Custominfo 功能可以在用户鼠标移至某个数据点时，以气泡形式展示对应的数据信息。我们可以通过自定义气泡大小、修改展示字段等方式来定制气泡颜色、大小、显示字等。

代码如下：

{
import { Line } from '@antv/g2plot';

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 45 },
  { year: '1958 年', sales: 48 },
];

const customInfo = (title: string, items: { name: string; value: string }[]) => {
  const htmlStrs: string[] = [];
  htmlStrs.push('<div class="popover-title">' + title + '</div>');
  items.forEach((item) => {
    htmlStrs.push('<div class="popover-content">');
    htmlStrs.push('<span class="name">' + item.name + '</span>');
    htmlStrs.push('<span class="value">' + item.value + '</span>');
    htmlStrs.push('</div>');
  });
  return htmlStrs.join('');
};

const linePlot = new Line('container', {
  data,
  xField: 'year',
  yField: 'sales',
  meta: {
    year: {
      range: [0, 1],
    },
  },
  padding: 'auto',
  label: {},
  point: {
    size: 5,
    shape: 'circle',
  },
  tooltip: {
    showTitle: false,
    showMarkers: false,
  },
  customInfo: ({ x, y, data: item }) => ({
    title: '',
    htmlContent: customInfo(item.year, [{ name: '销售额', value: item.sales }]),
    x,
    y,
  }),
});

linePlot.render();

}

四、结语

通过定制 Custominfo 可以使我们的图表更加易于理解和使用，丰富了用户对数据的认知。本文介绍了 Antv G2Plot 中 Custominfo 的基本用法和示例代码，希望能对大家有所启发。