要改变G2Plot分组柱状图图例样式,可以使用G2Plot提供的legend配置项来实现。

例如,可以使用legend.position来指定图例的位置,使用legend.marker来指定图例标记的样式,使用legend.textStyle来指定图例文字的样式。

下面是一个示例代码,演示如何修改G2Plot分组柱状图的图例样式:

import { Chart, Interval, Legend } from 'bizcharts';
import DataSet from '@antv/data-set';

const data = [
  { name: 'London', month: 'Jan.', revenue: 18.9 },
  { name: 'London', month: 'Feb.', revenue: 28.8 },
  { name: 'London', month: 'Mar.', revenue: 39.3 },
  { name: 'Tokyo', month: 'Jan.', revenue: 12.4 },
  { name: 'Tokyo', month: 'Feb.', revenue: 23.2 },
  { name: 'Tokyo', month: 'Mar.', revenue: 34.5 },
];

const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
  type: 'fold',
  fields: ['revenue'],
  key: 'city',
  value: 'revenue',
});

const legendStyle = {
  position: 'top-left',
  marker: { symbol: 'circle', style: { fill: 'red' } },
  textStyle: { fill: 'blue' },
};

export default function App() {
  return (
    <Chart height={400} data={dv.rows} autoFit>
      <Interval position="month*revenue" color="city" />
      <Legend {...legendStyle} />
    </Chart>
  );
}

在这个示例中,我们使用了legendStyle对象来定义图例的样式,然后将这个对象传递给Legend组件。

其中,position属性指定图例的位置为左上角,marker属性指定图例标记的样式为红色圆圈,textStyle属性指定图例文字的样式为蓝色。


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

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