antvis/G2

【v5】轴的 labelAutoRotate 配置失效 #5153

Deathsteps posted onGitHub

问题描述

axis 的 label auto 配置,目测只有 labelAutoEllipsis 生效

<img width="1167" alt="image" src="https://github.com/antvis/G2/assets/1549118/43c2f664-2e2f-4ea9-bb40-218e6b69db4b">

期望结果

  • labelAutoRotate 等生效

如何重现

官方代码修改

import { Chart } from '@antv/g2';

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

chart
  .interval()
  .data([
    { month: 'JJan.Jan.an.', profit: 387264, start: 0, end: 387264 },
    { month: 'Feb.', profit: 772096, start: 387264, end: 1159360 },
    { month: 'MJan.Jan.ar.', profit: 638075, start: 1159360, end: 1797435 },
    { month: 'AJan.Jan.pr.', profit: -211386, start: 1797435, end: 1586049 },
    { month: 'May', profit: -138135, start: 1586049, end: 1447914 },
    { month: 'JJan.Jan.un', profit: -267238, start: 1447914, end: 1180676 },
    { month: 'Jul.', profit: 431406, start: 1180676, end: 1612082 },
    { month: 'Aug.', profit: 363018, start: 1612082, end: 1975100 },
    { month: 'Sep.', profit: -224638, start: 1975100, end: 1750462 },
    { month: 'OcJan.Jan.Jan.t.', profit: -299867, start: 1750462, end: 1450595 },
    { month: 'NJan.Jan.Jan.ov.', profit: 607365, start: 1450595, end: 2057960 },
    { month: 'Dec.', profit: 1106986, start: 2057960, end: 3164946 },
    { month: 'ToJan.Jan.tal', start: 0, end: 3164946 },
  ])

  .encode('x', 'month')
  .encode('y', ['end', 'start'])
  .encode('color', (d) =>
    d.month === 'Total' ? 'Total' : d.profit > 0 ? 'Increase' : 'Decrease',
  )
  .axis('x', { labelAutoRotate: true })
  .axis('y', { labelFormatter: '~s' })
  .tooltip(['start', 'end']);

chart.render();

额外信息

  • G2 5.0.11 版本

可以先这样处理一下:

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
  padding: 'auto', // 自动计算 padding 的大小
});
posted by pearmini almost 2 years ago

padding auto 会把 X 轴刻度竖起来 :facepalm: 不是想要的丝滑旋转 <img width="716" alt="image" src="https://github.com/antvis/G2/assets/1549118/7da868f5-9ed7-46b5-91cf-0f536aa9ff0e">

posted by Deathsteps almost 2 years ago
  • 第一个问题:是一个 bug
  • 第二个问题:可以设置 labelTransform: 'rotate(45deg)'
posted by pearmini over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests