antv G2Plot 柱状图改变label颜色

您可以通过设置 label 的 style 属性来更改柱状图标签的颜色，示例如下：

import { Chart, Interval, registerShape } 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 },
  { year: '1959 年', sales: 38 },
  { year: '1960 年', sales: 38 },
  { year: '1962 年', sales: 38 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);
chart.scale('sales', { nice: true });
chart.axis('year', {
  tickLine: null,
});
chart.axis('sales', {
  label: null,
  title: {
    offset: 30,
    style: {
      fontWeight: 300,
    },
  },
});
chart.tooltip({
  showMarkers: false,
  title: '年份',
  shared: true,
});
chart.interaction('active-region');
chart.legend(false);

registerShape('interval', 'label', {
  draw(cfg, container) {
    const points = this.parsePoints(cfg.points); // 将会得到包含四个点的数组 points
    const { style } = cfg.label;
    const { top } = points[3]; // 取最后一个点的 top 值作为 label 的 y 坐标

    return container.addShape('text', {
      attrs: {
        x: points[3].x + 10, // 加 10px 的偏移量
        y: top,
        text: cfg.label.content,
        fill: style.fill || '#000' // 设置 label 的颜色
      },
    });
  },
});

chart
  .interval()
  .position('year*sales')
  .label('sales', {
    style: {
      fill: '#fff',
    },
    offset: 10,
  })
  .shape('label')
  .tooltip('year*sales');

chart.render();