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.

Sign up for GitHub

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

Jump to bottom

分面图在图例切换时，x轴无需隐藏，没有数据的分面隐藏 #6497

Open
sanye-huang opened this issue Oct 17, 2024 · 3 comments
Open

分面图在图例切换时，x轴无需隐藏，没有数据的分面隐藏 #6497

sanye-huang opened this issue Oct 17, 2024 · 3 comments

Comments

@sanye-huang
Copy link

sanye-huang commented Oct 17, 2024 •
edited
Loading

问题
分面图在图例切换时

  1. x轴无需隐藏
  2. 没有数据的分面隐藏

操作流程：

渲染 - 点击图例去掉图例4的数据，再选中图例4的数据，y轴变化

测试数据


const chart = new Chart({ container: "container" });

chart.options({
  type: "facetRect",
  width: 928,
  height: 640,
  paddingLeft: 60,
  paddingBottom: 60,
  data: [
    { series: "1", x: 10, y: 8.04 },
    { series: "1", x: 8, y: 6.95 },
    { series: "1", x: 13, y: 7.58 },
    { series: "1", x: 9, y: 8.81 },
    { series: "1", x: 11, y: 8.33 },
    { series: "1", x: 14, y: 9.96 },
    { series: "1", x: 6, y: 7.24 },
    { series: "1", x: "4", y: 4.26 },
    { series: "1", x: 12, y: 10.84 },
    { series: "1", x: 7, y: 4.81 },
    { series: "1", x: 5, y: 5.68 },
    { series: "2", x: 10, y: 9.14 },
    { series: "2", x: 8, y: 8.14 },
    { series: "2", x: 13, y: 8.74 },
    { series: "2", x: 9, y: 8.77 },
    { series: "2", x: 11, y: 9.26 },
    { series: "2", x: 14, y: 8.1 },
    { series: "2", x: 6, y: 6.13 },
    { series: "2", x: "4", y: 3.1 },
    { series: "2", x: 12, y: 9.13 },
    { series: "2", x: 7, y: 7.26 },
    { series: "2", x: 5, y: 4.74 },
    { series: "3", x: 10, y: 7.46 },
    { series: "3", x: 8, y: 6.77 },
    { series: "3", x: 13, y: 12.74 },
    { series: "3", x: 9, y: 7.11 },
    { series: "3", x: 11, y: 7.81 },
    { series: "3", x: 14, y: 8.84 },
    { series: "3", x: 6, y: 6.08 },
    { series: "3", x: "4", y: 5.39 },
    { series: "3", x: 12, y: 8.15 },
    { series: "3", x: 7, y: 6.42 },
    { series: "3", x: 5, y: 5.73 },
    { series: "4", x: 8, y: 6.58 },
    { series: "4", x: 8, y: 5.76 },
    { series: "4", x: 8, y: 7.71 },
    { series: "4", x: 8, y: 8.84 },
    { series: "4", x: 8, y: 8.47 },
    { series: "4", x: 8, y: 7.04 },
    { series: "4", x: 8, y: 5.25 },
    { series: "4", x: 19, y: 5.5 },
    { series: "4", x: 8, y: 5.56 },
    { series: "4", x: 8, y: 7.91 },
    { series: "4", x: 8, y: 6.89 },
  ],
  encode: { y: "series", color: "series" },
  children: [
    {
      type: "point",
      frame: false,
      inset: 10,
      encode: { x: "x", y: "y", color: "series" },
      scale: {
        y: { type: "linear", clamp: true, nice: true, independent: true, facet: false },
      },
      style: { stroke: "#000" },
      axis: { y: () => true },
      viewStyle: { plotStroke: "red", plotLineWidth: 2, plotOpacity: 0.5 },
    },
  ],
});

chart.render();

正常表现截图：
image

不达预期截图：
image
@sanye-huang
Copy link
Author

sanye-huang commented Oct 21, 2024 •
edited
Loading

补充 空间复合的问题：

问题：

点击图例后，该显示的内容不显示，不该显示的显示

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

const chart = new Chart({ container: "container" });

chart.options({
  type: "spaceFlex",
  width: 900,
  ratio: [2, 1],
  direction: "col",
  legend: {

  },
  data: {
    type: 'inline',
    value: [
      {
        统计日期: "2024-10-14 00:00:00",
        设备DAU: 36889,
        "设备DAU(年同比)": 3019,
        会员DAU: 36603,
        "会员DAU(年同比)": 30987,
        "设备DAU-会员DAU": 7687,
      },
      {
        统计日期: "2024-10-15",
        设备DAU: 35382,
        "设备DAU(年同比)": 31477,
        会员DAU: 32095,
        "会员DAU(年同比)": 48031,
        "设备DAU-会员DAU": 687,
      },
      {
        统计日期: "2024-10-16",
        设备DAU: 33397,
        "设备DAU(年同比)": 27245,
        会员DAU: 33775,
        "会员DAU(年同比)": 31130,
        "设备DAU-会员DAU": 722,
      },
      {
        统计日期: "2024-10-17",
        设备DAU: 32422,
        "设备DAU(年同比)": 34495,
        会员DAU: 38552,
        "会员DAU(年同比)": 31137,
        "设备DAU-会员DAU": 470,
      },
      {
        统计日期: "2024-10-18",
        设备DAU: 33261,
        "设备DAU(年同比)": 39958,
        会员DAU: 31170,
        "会员DAU(年同比)": 31314,
        "设备DAU-会员DAU": 991,
      },
      {
        统计日期: "2024-10-19",
        设备DAU: 33154,
        "设备DAU(年同比)": 31885,
        会员DAU: 32296,
        "会员DAU(年同比)": 31718,
        "设备DAU-会员DAU": 1958,
      },
      {
        统计日期: "2024-10-20",
        设备DAU: 35382,
        "设备DAU(年同比)": 31385,
        会员DAU: 31803,
        "会员DAU(年同比)": 31460,
        "设备DAU-会员DAU": 4079,
      },
    ]
  },
  children: [
    {
      type: "line",
      encode: {
        x: '统计日期',
        y: "leftYValue",
        color: "leftYIds",
        shape: 'smooth'
      },
      data: {
        type: 'inline', transform: [
          {
            type: 'fold',
            fields: ['设备DAU', '设备DAU(年同比)', '会员DAU', '会员DAU(年同比)'],
            key: 'leftYIds',
            value: 'leftYValue',
          }
        ]
      },
      axis: { x: {} },
    },
    {
      type: "interval",
      encode: {
        x: '统计日期',
        y: "leftYValue",
        color: "leftYIds",
      },
      data: {
        type: 'inline', transform: [
          {
            type: 'fold',
            fields: ['设备DAU-会员DAU'],
            key: 'leftYIds',
            value: 'leftYValue',
          }
        ]
      },
      axis: {},
    },
  ],
});

chart.render();

点击图例前截图

image

点击后截图
image

@sanye-huang sanye-huang changed the title 分面图多个轴无法自定义刻度和比例尺，且在图例切换时会变化 分面图在图例切换时，x轴无需隐藏，没有数据的分面隐藏 Oct 21, 2024
@interstellarmt
Copy link
Contributor

对于第一个问题，其实问题在于现在分面并没有提取出一个公共的坐标轴，在隐藏图例的时候只是单纯地对data做一个filter的处理，要满足自动调整的需求难度比较大，可以记一个点，这边是一些目前可能的优化方向，不知道能不能满足你的需求：

{
    type: 'facetRect',
    width: 928,
    height: 640,
    paddingLeft: 60,
    paddingBottom: 60,
    data: [
      { series: '1', x: 10, y: 8.04 },
      { series: '1', x: 8, y: 6.95 },
      { series: '1', x: 13, y: 7.58 },
      { series: '1', x: 9, y: 8.81 },
      { series: '1', x: 11, y: 8.33 },
      { series: '1', x: 14, y: 9.96 },
      { series: '1', x: 6, y: 7.24 },
      { series: '1', x: '4', y: 4.26 },
      { series: '1', x: 12, y: 10.84 },
      { series: '1', x: 7, y: 4.81 },
      { series: '1', x: 5, y: 5.68 },
      { series: '2', x: 10, y: 9.14 },
      { series: '2', x: 8, y: 8.14 },
      { series: '2', x: 13, y: 8.74 },
      { series: '2', x: 9, y: 8.77 },
      { series: '2', x: 11, y: 9.26 },
      { series: '2', x: 14, y: 8.1 },
      { series: '2', x: 6, y: 6.13 },
      { series: '2', x: '4', y: 3.1 },
      { series: '2', x: 12, y: 9.13 },
      { series: '2', x: 7, y: 7.26 },
      { series: '2', x: 5, y: 4.74 },
      { series: '3', x: 10, y: 7.46 },
      { series: '3', x: 8, y: 6.77 },
      { series: '3', x: 13, y: 12.74 },
      { series: '3', x: 9, y: 7.11 },
      { series: '3', x: 11, y: 7.81 },
      { series: '3', x: 14, y: 8.84 },
      { series: '3', x: 6, y: 6.08 },
      { series: '3', x: '4', y: 5.39 },
      { series: '3', x: 12, y: 8.15 },
      { series: '3', x: 7, y: 6.42 },
      { series: '3', x: 5, y: 5.73 },
      { series: '4', x: 8, y: 6.58 },
      { series: '4', x: 8, y: 5.76 },
      { series: '4', x: 8, y: 7.71 },
      { series: '4', x: 8, y: 8.84 },
      { series: '4', x: 8, y: 8.47 },
      { series: '4', x: 8, y: 7.04 },
      { series: '4', x: 8, y: 5.25 },
      { series: '4', x: 19, y: 5.5 },
      { series: '4', x: 8, y: 5.56 },
      { series: '4', x: 8, y: 7.91 },
      { series: '4', x: 8, y: 6.89 },
    ],
    encode: { y: 'series', color: 'series' },
    children: [
      {
        type: 'point',
        frame: false,
        inset: 10,
        margin: 5,
        encode: { x: 'x', y: 'y', color: 'series' },
        scale: {
          y: {
            type: 'linear',
            clamp: true,
            nice: true,
            independent: true,
            facet: false,
          },
        },
        axis: {
          x: ({ rowIndex, rowValuesLength }) =>
            rowIndex === rowValuesLength - 1
              ? true
              : {
                  title: false,
                },
        },
        style: { stroke: '#000' },
        viewStyle: { plotStroke: 'red', plotLineWidth: 2, plotOpacity: 0.5 },
      },
    ],
  };

初始
orignalfaceRect

隐藏图例4
click

@sanye-huang
Copy link
Author

对于第一个问题，其实问题在于现在分面并没有提取出一个公共的坐标轴，在隐藏图例的时候只是单纯地对data做一个filter的处理，要满足自动调整的需求难度比较大，可以记一个点，这边是一些目前可能的优化方向，不知道能不能满足你的需求：

{
    type: 'facetRect',
    width: 928,
    height: 640,
    paddingLeft: 60,
    paddingBottom: 60,
    data: [
      { series: '1', x: 10, y: 8.04 },
      { series: '1', x: 8, y: 6.95 },
      { series: '1', x: 13, y: 7.58 },
      { series: '1', x: 9, y: 8.81 },
      { series: '1', x: 11, y: 8.33 },
      { series: '1', x: 14, y: 9.96 },
      { series: '1', x: 6, y: 7.24 },
      { series: '1', x: '4', y: 4.26 },
      { series: '1', x: 12, y: 10.84 },
      { series: '1', x: 7, y: 4.81 },
      { series: '1', x: 5, y: 5.68 },
      { series: '2', x: 10, y: 9.14 },
      { series: '2', x: 8, y: 8.14 },
      { series: '2', x: 13, y: 8.74 },
      { series: '2', x: 9, y: 8.77 },
      { series: '2', x: 11, y: 9.26 },
      { series: '2', x: 14, y: 8.1 },
      { series: '2', x: 6, y: 6.13 },
      { series: '2', x: '4', y: 3.1 },
      { series: '2', x: 12, y: 9.13 },
      { series: '2', x: 7, y: 7.26 },
      { series: '2', x: 5, y: 4.74 },
      { series: '3', x: 10, y: 7.46 },
      { series: '3', x: 8, y: 6.77 },
      { series: '3', x: 13, y: 12.74 },
      { series: '3', x: 9, y: 7.11 },
      { series: '3', x: 11, y: 7.81 },
      { series: '3', x: 14, y: 8.84 },
      { series: '3', x: 6, y: 6.08 },
      { series: '3', x: '4', y: 5.39 },
      { series: '3', x: 12, y: 8.15 },
      { series: '3', x: 7, y: 6.42 },
      { series: '3', x: 5, y: 5.73 },
      { series: '4', x: 8, y: 6.58 },
      { series: '4', x: 8, y: 5.76 },
      { series: '4', x: 8, y: 7.71 },
      { series: '4', x: 8, y: 8.84 },
      { series: '4', x: 8, y: 8.47 },
      { series: '4', x: 8, y: 7.04 },
      { series: '4', x: 8, y: 5.25 },
      { series: '4', x: 19, y: 5.5 },
      { series: '4', x: 8, y: 5.56 },
      { series: '4', x: 8, y: 7.91 },
      { series: '4', x: 8, y: 6.89 },
    ],
    encode: { y: 'series', color: 'series' },
    children: [
      {
        type: 'point',
        frame: false,
        inset: 10,
        margin: 5,
        encode: { x: 'x', y: 'y', color: 'series' },
        scale: {
          y: {
            type: 'linear',
            clamp: true,
            nice: true,
            independent: true,
            facet: false,
          },
        },
        axis: {
          x: ({ rowIndex, rowValuesLength }) =>
            rowIndex === rowValuesLength - 1
              ? true
              : {
                  title: false,
                },
        },
        style: { stroke: '#000' },
        viewStyle: { plotStroke: 'red', plotLineWidth: 2, plotOpacity: 0.5 },
      },
    ],
  };

初始 orignalfaceRect

隐藏图例4 click

不太满足，这个每个轴都显示出来数据可能对不上刻度，即使设置了对齐。我的建议是如果没有数据，可以直接把对应的分面给去掉，其他的分面进行拉伸

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@interstellarmt @sanye-huang and others