您可以通过设置图例的 legendStyle 属性来给 G2Plot 柱状图的图例添加边框。以下是一个示例代码:

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

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

const barPlot = new Bar('container', {
  data,
  xField: 'sales',
  yField: 'year',
  legend: {
    position: 'top-left',
    legendStyle: {
      border: '1px solid #d9d9d9',
      padding: '10px',
      borderRadius: '4px',
    },
  },
});

barPlot.render();

在上面的代码中,我们在 legendStyle 属性中设置了 borderpaddingborderRadius 属性来给图例添加边框、内边距和圆角。

您可以根据自己的需求调整这些属性的值来达到想要的效果。

antv G2Plot 柱状图给图例添加边框

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

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