Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

分面 是否支持展示所有子图的坐标轴 #6237

Closed
BubbleLM opened this issue May 23, 2024 · 1 comment
Closed

分面 是否支持展示所有子图的坐标轴 #6237

BubbleLM opened this issue May 23, 2024 · 1 comment

Comments

@BubbleLM
Copy link

问题描述

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

const Data = new Array(100).fill().map((item, index) => {
  return {
      year: 1990 + index + '',
      value: Math.ceil(Math.random() * 20),
      type: 'cat ' + (index % 10),
  };
})

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 400,
  padding: 20
});
chart.data(Data);

chart.scale({
  value: {
    sync: true,
    nice: true
  },
  type: {
    sync: true,
  },
});

chart.facet('list', {
  fields: [ 'type' ],
  cols: 3,
  padding: 15,
  showTitle: true,
  eachView(view, facet) {
    view.axis('year', {
      label: {
        style: {
          fill: '#333'
        }
      },
      line: null,
      tickLine: null,
      title: {
        text: 'X轴',
        style: {
          fontSize: 12,
          fill: '#333'
        }
      }
    })
    view.axis('value', {
      label: {
        style: {
          fill: '#333'
        }
      },
      line: null,
      tickLine: null,
      title: {
        text: 'y轴',
        style: {
          fontSize: 12,
          fill: '#333'
        }
      }
    })
    view.point()
      //.axis(false)
      .position('year*value')
        .color('cut')
        .shape('circle')
        .style({ fillOpacity: 0.3, stroke: null })
        .size(2);
  }
});
chart.render();

重现链接

No response

重现步骤

No response

预期行为

实际效果:
image

当前y轴仅会在每行展示,期望每个子图都能展示自己的坐标轴。期望效果如下:
image

平台

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

屏幕截图或视频(可选)

No response

补充说明(可选)

No response

@pearmini
Copy link
Member

pearmini commented Jun 3, 2024

4.0 的分面没有这个能力,可以看看 5.0 的这个例子:

/**
 * A recreation of one of these demos: https://observablehq.com/@observablehq/plot-facets?collection=@observablehq/plot
 */
import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  width: 1100,
  height: 320,
  paddingLeft: 60,
  paddingBottom: 60,
});

const facetRect = chart
  .facetRect()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/anscombe.json',
  })
  .encode('x', 'series');

facetRect
  .point()
  .attr('paddingLeft', 40)
  .attr('inset', 10)
  .encode('x', 'x')
  .encode('y', 'y')
  .style('stroke', '#000')
  .axis('y', () => true);

chart.render();

@pearmini pearmini closed this as completed Jun 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants