antvis/G2

Points on the chart are not displayed correctly if stackY is enabled #6506

SAScrazyAS posted onGitHub

问题描述

When enabling transform stackY, the points on the graph should lie on lines with the same data

重现链接

No response

重现步骤

  1. Create an Area Graph
  2. Add multiple episodes
  3. Enable transform stackY
  4. Add points to the chart

预期行为

The points lie on the surface of the area

平台

  • 操作系统: Windows
  • 网页浏览器: Google Chrome

屏幕截图或视频(可选)

image

补充说明(可选)

No response


Nice issue, can help to fix the bug? the code stackY is here.

You can use the code below to debug.

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

const data = [
  { month: 'Jan', city: 'Tokyo', temperature: 7 },
  { month: 'Jan', city: 'London', temperature: 3.9 },
  { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
  { month: 'Feb', city: 'London', temperature: 4.2 },
  { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
  { month: 'Mar', city: 'London', temperature: 5.7 },
  { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
  { month: 'Apr', city: 'London', temperature: 8.5 },
  { month: 'May', city: 'Tokyo', temperature: 18.4 },
  { month: 'May', city: 'London', temperature: 11.9 },
  { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
  { month: 'Jun', city: 'London', temperature: 15.2 },
  { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
  { month: 'Jul', city: 'London', temperature: 17 },
  { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
  { month: 'Aug', city: 'London', temperature: 16.6 },
  { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
  { month: 'Sep', city: 'London', temperature: 14.2 },
  { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
  { month: 'Oct', city: 'London', temperature: 10.3 },
  { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
  { month: 'Nov', city: 'London', temperature: 6.6 },
  { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
  { month: 'Dec', city: 'London', temperature: 4.8 },
];

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

chart
  .data(data)
  .transform([{ type: 'stackY' }])
  .encode('x', 'month')
  .encode('y', 'temperature')
  .encode('color', 'city')
  .scale('x', {
    range: [0, 1],
  })
  .scale('y', {
    nice: true,
  })
  .axis('y', { labelFormatter: (d) => d + '°C' });

chart.line().encode('shape', 'smooth');

chart.point().encode('shape', 'point').tooltip(false);

chart.render();
posted by hustcc 6 months ago

Fund this Issue

$0.00
Funded

Pull requests