antvis/G2

简单条形图y轴刻度设置最小值,图形渲染异常 #6152

Calmio-Y posted onGitHub

问题描述

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

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, });

chart .interval() .coordinate({ transform: [{ type: 'transpose' }] }) .data(data) .encode('x', 'year') .encode('y', 'sales') .scale("y", { domainMin: 30, nice: true, })

chart.render();

重现链接

No response

重现步骤

No response

预期行为

设置刻度最值时,图形正常渲染

平台

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

屏幕截图或视频(可选)

<img width="929" alt="22" src="https://github.com/antvis/G2/assets/30626950/bc6817ba-082f-45e6-b6cf-8acc29c04095">

补充说明(可选)

No response


这个需要设置 chart 的 clip 属性去裁剪超出的部分:

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

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,
  clip: true,
});

chart
  .interval()
  .coordinate({ transform: [{ type: 'transpose' }] })
  .data(data)
  .encode('x', 'year')
  .encode('y', 'sales')
  .scale('y', {
    domainMin: 30,
    nice: true,
  });

chart.render();
posted by pearmini about 1 year ago

Fund this Issue

$0.00
Funded

Pull requests