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

去掉分面图的 frame,并且自定义样式 #5644

Closed
pearmini opened this issue Oct 16, 2023 · 1 comment · Fixed by #5749
Closed

去掉分面图的 frame,并且自定义样式 #5644

pearmini opened this issue Oct 16, 2023 · 1 comment · Fixed by #5749

Comments

@pearmini
Copy link
Member

咨询下 重复矩阵的每个分面的那个黑框样式可以定制么 我没找到相关的api

image

@pearmini
Copy link
Member Author

pearmini commented Oct 16, 2023

可以先设置 frame:false,然后通过 point.viewStyle 的 plotFill ,plotStroke 等设置

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

const toNaN = (d) => (d === 'NaN' ? NaN : d);

const chart = new Chart({
  container: 'container',
  width: 800,
  height: 800,
  paddingLeft: 70,
  paddingBottom: 70,
});

const repeatMatrix = chart
  .repeatMatrix()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/penguins.json',
    transform: [
      {
        type: 'map',
        callback: ({
          culmen_depth_mm: cdepth,
          culmen_length_mm: clength,
          flipper_length_mm: flength,
          body_mass_g: bmass,
          ...d
        }) => ({
          ...d,
          culmen_depth_mm: toNaN(cdepth),
          culmen_length_mm: toNaN(clength),
          flipper_length_mm: toNaN(flength),
          body_mass_g: toNaN(bmass),
        }),
      },
    ],
  })
  .encode('position', ['culmen_length_mm', 'culmen_depth_mm']);

repeatMatrix
  .point()
  .attr('frame', false)
  .encode('color', 'species')
  .viewStyle('plotStroke', '#aaa')
  .viewStyle('plotOpacity', 0.5);

chart.render();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant