[4.0] bug & 优化汇总

[hustcc]

常驻、置顶，直到全部修复。所有 bugfix 的 pr ref 到这个 issue。

[JasonWong-ZS]

饼图数据传入为数值的时候,其中一个数值为负数的问题

const data = [ { item: '事例一', percent: -0.4 }, { item: '事例二', percent: 0.21 }, { item: '事例三', percent: 0.17 }, { item: '事例四', percent: 0.13 }, { item: '事例五', percent: 0.09 } ]; const chart = new G2.Chart({ container: 'container', forceFit: true, height: 500 }); chart.source(data, { percent: { formatter: val => { //val = (val 100) + '%'; return val; } } }); chart.coord('theta', { radius: 0.75 }); chart.tooltip({ showTitle: false, itemTpl: '

{name}: {value}

' }); chart.intervalStack() .position('percent') .color('item') .label('percent', { formatter: (val, item) => { return item.point.item + ': ' + val; } }) .tooltip('itempercent', (item, percent) => { percent = percent * 100 + '%'; return { name: item, value: percent }; }) .style({ lineWidth: 1, stroke: '#fff' }); chart.render();

[simaQ]

axis line 和 grid 重叠的问题

这个应该是可以通过绘制顺序解决，把 grid 绘制在 backgroundGroup 层，坐标轴线绘制在 frontGroup 层

[simaQ]

• [x] 刻度线和文本没有对应 @simaQ
• [x] chart.tooltip() 配置项变更了哦 @simaQ
• [x] tooltip 数据查找问题 @simaQ

[simaQ]

• [x] 当鼠标离开画布时，没有触发 plot:leave 事件 @hustcc ref

如下图。右侧 padding 为 0，鼠标离开的时候没有触发 plot:leave 事件，导致 tooltip 没有隐藏

[simaQ]

• [x] 饼图默认填充上 x 字段 @simaQ

[simaQ]

• 4.0 为了达到功能的最大化，已将 3.x 中的一些内置的 tooltip 的配置规则删除，即各个配置项之间不再存在耦合，用户可以按需设置配置项，带来自由度的同时降低了 3.x 开箱即用的便利，但是从 4.0 的定位以及给用户的灵活度来看，这种牺牲是可取的。

• [x] 饼图 label @simaQ

• [x] 设置了起始和结束角的 theta 坐标系，自动布局时出错，复现DEMO： http://localhost:8000/zh/examples/pie/basic#pie-ranged @hustcc

  chart.coordinate(‘theta’, {
  startAngle: Math.PI, /// 起始角度/
  endAngle: Math.PI * (3 / 2) /// 结束角度/
  });

• [x] 以下 3.x 接口目前不支持，为所有的图例进行配置，4.0 是否有必要支持？@hustcc

  chart.legend({
  offsetY: -20
  });

• [x] 图例布局有误 @hustcc [image:0D9D3501-C2A6-43F3-A72D-50408560C551-1525-000010EC866E5F40/A6A74650-80BB-491F-B68D-15FF6F30DEA0.png]

• [x] https://github.com/antvis/G2/issues/1635 @hustcc

• [x] annotation 需要支持百分比配置 @simaQ

• [x] 设置了起始和结束角的 theta 坐标系，坐标轴绘制有问题，复现 demo : http://localhost:8000/zh/examples/pie/basic#pie-ranged @hustcc

• [x] chart.axis() 的配置项定义未包含 grid @hustcc

• [x] chart.legend() 不支持 marker: ‘circle’ 的写法，直接就绘制不出来了…复现 demo: http://localhost:8000/zh/examples/radar/radar#with-line @hustcc

  chart.legend('user', {
  marker: 'circle',
  offsetY: -30
  });

  不再支持

• [x] 饼图更新动画 @simaQ

• [x] tooltip 交互，需要等交互语法 @simaQ

• [x] 如何关闭自动布局？当用户手动设置了 padding，是否就应该按照用户设置的为准 @hustcc

[simaQ]

• [x] 确定 chart.annotation().arc() 的参数 @simaQ

[simaQ]

• [x] chart.changeSize() 的时候。annotation 更新有问题 @hustcc

[simaQ]

• [x] 自定义图例如何在 chart.legend() 上进行配置，要同 3.x 保持一致吗？

只要用户定义了 items ,就以用户定义的 items 为准

[simaQ]

• [x] 极坐标下半径坐标轴的文本应该展示在坐标轴左侧 @hustcc 复现 demo: http://localhost:8000/zh/examples/radar/radar#basic

[simaQ]

下面重复

• [ ] 当图例设置为 position: 'right-bottom' 时，布局出错 @hustcc 复现 demo：http://localhost:8000/zh/examples/bar/dodge#bar4

[simaQ]

• [x] chart.annotation().text 支持 rotate 属性，目前 G 4.0 的 text 不再支持传入 rotate

  先不支持，后续有需求再加，需要 component 层级支持 https://github.com/antvis/component/issues/105 @dxq613

• [x] chart.legend({ position: 'top-center' }); 设置失效 @hustcc 复现 demo: http://localhost:8000/zh/examples/gallery/bar#bar3

[simaQ]

• [x] 极坐标弧轴的文本首尾重叠了，默认应该只展示一个文本即可。@hustcc 复现 demo: http://localhost:8000/zh/examples/radar/radar#flower-line

[simaQ]

• [x] 坐标轴文本绘制两次

复现 demo: http://localhost:8000/zh/examples/bar/basic#time-bar

[simaQ]

• [ ] 条形图布局留白有问题

const data = [
      { country: '巴西', population: 18203 },
      { country: '印尼', population: 23489 },
      { country: '美国', population: 29034 },
      { country: '印度', population: 104970 },
      { country: '中国', population: 131744 },
    ];

    const div = createDiv();
    div.style.display = 'inline-block';
    const chart = new G2.Chart({
      container: createDiv(),
      width: 250,
      height: 200,
    });

    chart.data(data);

    chart.coordinate().transpose();
    // chart.coordinate('polar').transpose();
    chart.interval().position('country*population');

    chart.render();

[simaQ]

• [x] 自定义 shape 返回数组形式

return ['image', imageMap[name]];

[simaQ]

• [ ] 坐标轴文本被剪切 http://localhost:8000/en/examples/line/step

• [ ] y axis title 被裁剪

[simaQ]

• [x] chart.scale(‘x’, { sync: true }) 未支持

[simaQ]

Scale 相关问题

@dxq613 @zqlu

• [ ] 'time' 类型的 scale 不支持 mask 属性
• [ ] @antv/scale 移除 moment 依赖
• [ ] http://localhost:8000/zh/examples/point/scatter#time-bubble

log scale 导致的

chart.scale('exp_amo', {
  type: 'log',
  ticks: [225, 1000000, 2000000, 4000000, 6000000]
});

[simaQ]

• [ ] chart.axis() 不支持 position 设置 @hustcc

[simaQ]

• [ ] gird 是否支持 align: 'center' ？

chart.axis('day', {
  title: null,
  grid: {
    align: 'center',
    lineStyle: {
      lineWidth: 1,
      lineDash: null,
      stroke: '#f0f0f0'
    },
    showFirstLine: true
  }
});

[paleface001]

• [ ] gird 是否支持 align: 'center' ？

chart.axis('day', {
  title: null,
  grid: {
    align: 'center',
    lineStyle: {
      lineWidth: 1,
      lineDash: null,
      stroke: '#f0f0f0'
    },
    showFirstLine: true
  }
});

还是要支持滴~ 色块图用的着

[simaQ]

• [x] 分类图例是否支持倒序显示 @simaQ

G2 层处理

chart.legend({
  reversed: boolean,
});

[simaQ]

• [ ] slider 组件 @zqlu

[lessmost]

• [ ] slider 组件 @zqlu

@hustcc @dxq613 https://github.com/antvis/scale/pull/23 https://github.com/antvis/component/pull/118

[simaQ]

• [ ] label 超出画布 @simaQ

[simaQ]

• [ ] 分类图例过滤问题 @hustcc

[simaQ]

• [ ] Tooltip 的 crosshairs 支持 canvas 版本的

12.30 beta 发布后添加 https://github.com/antvis/G2/projects/2#card-30956256

[simaQ]

• [ ] chart.axis() 接口中，label 和 grid 属性支持回调

参考 https://yuque.antfin-inc.com/antv/g2-4/dlzf45#7e22ccf3

[simaQ]

• [x] geometry.label() 中属性 adjustType 默认提供的几种类型的重命名，目前 3.x adjustType 提供的三种类型：
  1. treemap 根据包围盒大小计算，超出包围盒则不展示，这个其实不止适用于 treemap 图表，所以命名为 treemap 不太合适
  2. scatter 对重叠的文本进行调整，也不只是适用于散点图
  3. map 这个目前暂时可以只用于地图

[dxq613]

• [ ] element 状态量的配置目前使用起来太难用
• [ ] element show, hide 时的动画

[simaQ]

• [ ] 多 view 的 tooltip 交互问题 http://localhost:8000/zh/examples/line/multiple#kernel-smooth-regression-2

[simaQ]

• [ ] http://localhost:8000/zh/examples/area/basic#area-large
  • [x] 左侧坐标轴标题 undefined @hustcc
  • [ ] 自定义图例没有生效 @hustcc
  • [ ] tooltip marker 颜色不支持渐变色 @dxq613

[simaQ]

• [ ] http://localhost:8000/zh/examples/area/stacked#streamgraph 绘制失败

原因： 图例没有按照传入的 maxWidth 进行布局导致的。

 chart.legend(false);

即可绘制正确。

@dxq613

[simaQ]

• [x] http://localhost:8000/zh/examples/bar/dodge#bar4 @hustcc
  • [x] 标题 undefined
  • [x] 图例布局有问题

[simaQ]

• [ ] Tooltip 交互的躲避有问题 @dxq613

[simaQ]

• [x] http://localhost:8000/zh/examples/pie/rose#rose-ranged
  • [x] 网格线
  • [x] 坐标轴文本方向

[simaQ]

• [x] http://localhost:8000/zh/examples/box/box#one-dim 一维箱型图绘制出错 @simaQ

[simaQ]

• [x] http://localhost:8000/zh/examples/box/box#with-error 点图 y 轴为数组时有问题。padding 也出问题了 @simaQ

[simaQ]

• [ ] http://localhost:8000/zh/examples/candlestick/demo
  • [ ] 多 view 的图例
  • [ ] 出现多坐标轴

[simaQ]

• [x] http://localhost:8000/zh/examples/component/component#label-treemap @simaQ

定位到是由 clone() 函数导致

[simaQ]

• [x] http://localhost:8000/zh/examples/component/component#legend-size 绘制有卡顿 @simaQ

原因：userData 数据源中有一个字段是 valsue，导致 size('value') 映射时，该条数据对应的点的 r 为 NaN，然后导致 bbox 为 NaN，最后导致局部刷新出错~~~ ref https://github.com/antvis/g/issues/343

[dxq613]

• [ ] 框选过滤时，如果未框选到任何元素时 chart.filter() 全部清理后，无效

[simaQ]

• [x] 坐标轴没有考虑坐标系发生 reflect 的情况， 目前坐标系支持 chart.coordinate().reflect('x'), chart.coordinate().reflect('y') @hustcc ref

http://localhost:8000/zh/examples/heatmap/heatmap#calendar-horizontal

[simaQ]

• [ ] 漏斗图图例太亲密 @hustcc

http://localhost:8000/zh/examples/funnel/funnel#basic

[simaQ]

• [x] chart.coordinate().reflect() 未生效 ref

http://localhost:8000/zh/examples/map/map#bubble-map

[simaQ]

• [ ] 地图绘制错误 http://localhost:8000/zh/examples/map/map#choropleth-map @simaQ

http://localhost:8000/zh/examples/map/map#choropleth-map

https://github.com/antvis/G2/issues/1715#issuecomment-569633373 同一个问题，先关闭

[simaQ]

• [x] scale 的 sync 问题 @hustcc

http://localhost:8000/zh/examples/map/map#us-states-hex

[simaQ]

• [x] http://localhost:8000/zh/examples/gallery/area#area7 绘制出错 @simaQ

主要原因：4.0 的 scale 不支持 timeCat 导致的

[simaQ]

• [x] grid 为 ci'rcle 类型时，坐标轴线和网格线不一致... @hustcc @dxq613

http://localhost:8000/zh/examples/box/box#radial-box