antvis/G2

[面积图] 设置 scale/y/domainMin 后 面积溢出到横坐标下方 #6282

Jungzl posted onGitHub

问题描述

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

const data = [
  { country: 'Asia', year: '1750', value: 502 },
  { country: 'Asia', year: '1800', value: 635 },
  { country: 'Asia', year: '1850', value: 309 },
  { country: 'Asia', year: '1900', value: 268 },
  { country: 'Asia', year: '1950', value: 400 },
  { country: 'Asia', year: '1999', value: 634 },
  { country: 'Asia', year: '2050', value: 547 },
  { country: 'Africa', year: '1750', value: 106 },
  { country: 'Africa', year: '1800', value: 107 },
  { country: 'Africa', year: '1850', value: 111 },
  { country: 'Africa', year: '1900', value: 766 },
  { country: 'Africa', year: '1950', value: 221 },
  { country: 'Africa', year: '1999', value: 767 },
  { country: 'Africa', year: '2050', value: 133 },
  { country: 'Europe', year: '1750', value: 163 },
  { country: 'Europe', year: '1800', value: 203 },
  { country: 'Europe', year: '1850', value: 276 },
  { country: 'Europe', year: '1900', value: 628 },
  { country: 'Europe', year: '1950', value: 547 },
  { country: 'Europe', year: '1999', value: 729 },
  { country: 'Europe', year: '2050', value: 408 },
  { country: 'Oceania', year: '1750', value: 200 },
  { country: 'Oceania', year: '1800', value: 200 },
  { country: 'Oceania', year: '1850', value: 200 },
  { country: 'Oceania', year: '1900', value: 460 },
  { country: 'Oceania', year: '1950', value: 230 },
  { country: 'Oceania', year: '1999', value: 300 },
  { country: 'Oceania', year: '2050', value: 300 },
];

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

chart
  .data(data)
  .encode('x', 'year')
  .encode('y', 'value')
  .encode('color', 'country')
  .axis('x', { title: false })
  .axis('y', { title: false })
  .scale('y', { domainMin: 100 });

chart.area().style('fillOpacity', 0.3);

chart.line().style('strokeWidth', 2).tooltip(false);

chart.render();

image

重现链接

No response

重现步骤

No response

预期行为

面积被限制在横坐标之上

平台

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

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


scale.y 需要配置 clamp 为 true:

  .scale('y', { domainMin: 100, clamp: true }); // 这里
posted by pearmini 11 months ago

Fund this Issue

$0.00
Funded

Pull requests