Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【v5】堆叠条形图 label 提示丢失 #5336

Closed
codesyofo opened this issue Jul 21, 2023 · 1 comment
Closed

【v5】堆叠条形图 label 提示丢失 #5336

codesyofo opened this issue Jul 21, 2023 · 1 comment

Comments

@codesyofo
Copy link

正常:

image

异常:

image
图例取消只剩一个后,label丢失

配置代码:

/**
 * A recreation of this demo: https://nivo.rocks/storybook/?path=/docs/bar--diverging-stacked
 */
import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  paddingLeft: 40,
});

chart
  .interval()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/nivo-gain-lost.json',
    transform: [
      {
        type: 'fold',
        fields: [
          'lost > 100$',
          'lost <= 100$',
          'gained <= 100$',
          'gained > 100$',
        ],
      },
    ],
  })
  .transform([{ type: 'stackY' }])
  .encode('x', 'user')
  .encode('y', 'value')
  .encode('color', 'key')
  .scale('x', { padding: 0.2 })
  .scale('y', { domainMin: -100, domainMax: 100 })
  .scale('color', {
    domain: ['lost > 100$', 'lost <= 100$', 'gained <= 100$', 'gained > 100$'],
    range: ['#97e3d5', '#61cdbb', '#e25c3b', '#f47560'],
  })
  .legend('color', { title: false })
  .label({
    text: 'value',
    position: 'inside',
    formatter: (v) => (v ? `${v}%` : ''),
    transform: [{ type: 'overlapDodgeY' }],
    style: {
      fill: '#000',
      fontSize: 10,
    },
  })
  .axis('y', {
    position: 'right',
    title: false,
    labelFormatter: (v) => `${v}%`,
  })
  .style('radius', 10)
  .interaction('tooltip', {
    shared: true
  })

chart
  .lineY()
  .data([0])
  .style('lineWidth', 2)
  .style('stroke', '#e25c3b')
  .style('strokeOpacity', 1);

chart.call(titleLeft, '75%', 'lost', '#61cdbb');
chart.call(titleLeft, '20%', 'gain', '#e25c3b');

function titleLeft(node, y, text, fill) {
  node
    .text()
    .style('x', -10)
    .style('y', y)
    .style('text', text)
    .style('fontWeight', 'bold')
    .style('dy', -10)
    .style('transform', 'rotate(-90)')
    .style('fill', fill);
}

chart.render();
@codesyofo codesyofo changed the title 堆叠条形图 label 提示丢失 [v5] 堆叠条形图 label 提示丢失 Jul 21, 2023
@codesyofo codesyofo changed the title [v5] 堆叠条形图 label 提示丢失 【v5】堆叠条形图 label 提示丢失 Jul 21, 2023
@hustcc hustcc self-assigned this Aug 15, 2023
@pearmini
Copy link
Member

这个已经修复了,升级到最新版本即可。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants