antvis/G2

坐标轴刻度线自动旋转给了选项,但永远旋转90度,为什么 #6011

asz97665 posted onGitHub

问题描述

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

const data = [ { year: '1991/04/10', value: 3 }, { year: '1992/04/10', value: 4 }, { year: '1993/04/10', value: 3.5 }, { year: '1994/04/10', value: 5 }, { year: '1995/04/10', value: 4.9 }, { year: '1996/04/10', value: 6 }, { year: '1997/04/10', value: 7 }, { year: '1998/04/10', value: 9 }, { year: '1999/04/10', value: 13 }, ];

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

chart .data(data) .encode('x', 'year') .encode('y', 'value') .axis('x', { labelAutoRotate: { type: 'rotate', /** 可选的旋转角度值 */ optionalAngles: [0, 20, 45, 90] } }) .scale('x', { range: [0, 1], }) .scale('y', { domainMin: 0, nice: true, });

chart.line().label({ text: 'value', style: { dx: -10, dy: -12, }, });

chart.point().style('fill', 'white').tooltip(false);

chart.render();

重现链接

No response

重现步骤

No response

预期行为

No response

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

image

补充说明(可选)

No response


这个配置在指定了 paddingBottom 才会生效:

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

const data = [
  { year: '1991/04/10', value: 3 },
  { year: '1992/04/10', value: 4 },
  { year: '1993/04/10', value: 3.5 },
  { year: '1994/04/10', value: 5 },
  { year: '1995/04/10', value: 4.9 },
  { year: '1996/04/10', value: 6 },
  { year: '1997/04/10', value: 7 },
  { year: '1998/04/10', value: 9 },
  { year: '1999/04/10', value: 13 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  paddingBottom: 40, // 这里
});

chart
  .data(data)
  .encode('x', 'year')
  .encode('y', 'value')
  .axis('x', {
    labelAutoRotate: {
      type: 'rotate',
      /** 可选的旋转角度值 */
      optionalAngles: [0, 20, 45, 90],
    },
  })
  .scale('x', {
    range: [0, 1],
  })
  .scale('y', {
    domainMin: 0,
    nice: true,
  });

chart.line().label({
  text: 'value',
  style: {
    dx: -10,
    dy: -12,
  },
});

chart.point().style('fill', 'white').tooltip(false);

chart.render();
posted by pearmini 10 months ago

Fund this Issue

$0.00
Funded

Pull requests