antvis/G2

Bug: spaceFlex 模式下 chart 的 autoFit 配置无效 #5783

lxfu1 posted onGitHub

AntV Open Source Contribution Plan(可选)

  • 我同意将这个 Issue 参与 OSCP 计划

Issue 类型

初级任务

任务介绍

spaceFlex 模式下 chart 的 autoFit 配置无效,修复这个问题:

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

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

chart.options({
  type: 'spaceFlex',
  children: [
    {
      type: 'interval',
      axis: {
        x: {
          position: 'right',
          title: false,
        },
        y: {
          title: false,
        },
      },
      data: [
        {
          country: '乌拉圭',
          '2016年耕地总面积': -13.4,
          '2016年转基因种植面积': 12.3,
        },
        {
          country: '巴拉圭',
          '2016年耕地总面积': -14.4,
          '2016年转基因种植面积': 6.3,
        },
      ],
      coordinate: {
        transform: [
          {
            type: 'transpose',
          },
        ],
      },
      scale: {
        y: {
          nice: true,
        },
      },
      tooltip: {
        items: [
          {
            channel: 'y',
          },
        ],
      },
      interaction: {
        tooltip: {
          shared: true,
        },
      },
      encode: {
        x: 'country',
        y: '2016年耕地总面积',
      },
    },
    {
      type: 'interval',
      paddingLeft: 0,
      axis: {
        x: {
          label: false,
          title: false,
        },
        y: {
          title: false,
        },
      },
      data: [
        {
          country: '乌拉圭',
          '2016年耕地总面积': 13.4,
          '2016年转基因种植面积': 12.3,
        },
        {
          country: '巴拉圭',
          '2016年耕地总面积': 14.4,
          '2016年转基因种植面积': 6.3,
        },
      ],
      coordinate: {
        transform: [
          {
            type: 'transpose',
          },
        ],
      },
      scale: {
        y: {
          nice: true,
        },
      },
      tooltip: {
        items: [
          {
            channel: 'y',
          },
        ],
      },
      interaction: {
        tooltip: {
          shared: true,
        },
      },
      encode: {
        x: 'country',
        y: '2016年转基因种植面积',
      },
    },
  ],
});

chart.render();

认领

posted by li1615882553 over 1 year ago

定位到错误:options这种方式,在传入的时候会调用updateRoot来更新跟节点,因为new Chart会创建一个view类型的Node,后options方法中传入了一个spaceFlex类型的Node,两者不同会走到更新方法:updateNode,在updateNode中发现两个Node的type不一致,会将传入options的value覆盖老value,导致value中的autoFit丢失,最终丢失响应式

updateRoot方法: https://github.com/antvis/G2/blob/56723247f8d9051344d1ec47fc5d490760e294dd/src/api/utils.ts#L228-L262

updateNode方法: https://github.com/antvis/G2/blob/56723247f8d9051344d1ec47fc5d490760e294dd/src/api/utils.ts#L191-L201

posted by li1615882553 over 1 year ago

这里是不是应该:options方法传入的节点应该继承new Chart节点的value属性呢?

posted by li1615882553 over 1 year ago

看看能不能修改 normalizeRootOptions 这个方法来解决这个问题:当 root 是一个 composition node 时候,把 chart options 中某些值给 root

posted by pearmini over 1 year ago

有一个问题想问一下:这里判断type是否是mark的时候,type在什么情况下是方法呢? https://github.com/antvis/G2/blob/56723247f8d9051344d1ec47fc5d490760e294dd/src/api/utils.ts#L128-L134

posted by li1615882553 over 1 year ago

可能是一个 composite mark 的时候,参考这个测试

posted by pearmini over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests