在 antv G2Plot 中,可以通过设置 spiderLabel 属性来设置玫瑰图的蜘蛛标签。具体方法如下:

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

const data = [
  { type: '分类一', value: 27 },
  { type: '分类二', value: 25 },
  { type: '分类三', value: 18 },
  { type: '分类四', value: 15 },
  { type: '分类五', value: 10 },
  { type: '分类六', value: 5 },
];

const rosePlot = new Rose('container', {
  data,
  xField: 'type',
  yField: 'value',
  seriesField: 'type',
  radius: 0.8,
  label: {
    visible: false,
  },
  legend: {
    position: 'right-top',
  },
  spiderLabel: {
    label: {
      style: {
        fontSize: 12,
      },
    },
    formatter: (text, item) => {
      return `${text}: ${item.value}%`;
    },
  },
});

rosePlot.render();

在上述代码中,我们通过设置 spiderLabel 属性来配置玫瑰图的蜘蛛标签。其中,formatter 属性用于自定义标签内容,可以通过 item 参数获取当前数据项的值,从而进行自定义处理。在这个例子中,我们将标签内容设置为分类名称和占比的组合。

antv g2plot中的玫瑰图设置蜘蛛标签

原文地址: https://www.cveoy.top/t/topic/EZz 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录