Closed hustcc closed 4 years ago
scale 中的 time 返回的 ticks 有问题,不是对应的日期,而是返回的小时。然后导致 tick 有相同,触发 component 的错误。这个我改成传入 component 加上 id 解决。time scale 的问题在 scale 修复之后自动解决。
http://localhost:8000/zh/examples/bar/basic#time-bar
复现 demo: http://localhost:8000/zh/examples/gallery/area#area7
@hustcc
这个我测试是 ok 的,有什么特殊的复现步骤吗?
这个我测试是 ok 的,有什么特殊的复现步骤吗?
DEMO 代码有更新,合掉我的分支~~~
import { DataView } from '@antv/data-set';
import { Chart } from '@antv/g2';
const data = [
{ x: 'Oceania', low: 1, q1: 9, median: 16, q3: 22, high: 24 },
{ x: 'East Europe', low: 1, q1: 5, median: 8, q3: 12, high: 16 },
{ x: 'Australia', low: 1, q1: 8, median: 12, q3: 19, high: 26 },
{ x: 'South America', low: 2, q1: 8, median: 12, q3: 21, high: 28 },
{ x: 'North Africa', low: 1, q1: 8, median: 14, q3: 18, high: 24 },
{ x: 'North America', low: 3, q1: 10, median: 17, q3: 28, high: 30 },
{ x: 'West Europe', low: 1, q1: 7, median: 10, q3: 17, high: 22 },
{ x: 'West Africa', low: 1, q1: 6, median: 8, q3: 13, high: 16 },
];
const dv = new DataView().source(data);
dv.transform({
type: 'map',
callback: (obj) => {
obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
return obj;
},
});
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
});
chart.data(dv.rows);
chart.scale('range', {
max: 35,
});
chart.axis('range', {
grid: {
line: {
type: 'circle',
},
},
});
chart.tooltip({
showTitle: false,
itemTpl:
'<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:4px;">' +
'<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
'{name}<br/>' +
'<span style="padding-left: 16px">最大值:{high}</span><br/>' +
'<span style="padding-left: 16px">上四分位数:{q3}</span><br/>' +
'<span style="padding-left: 16px">中位数:{median}</span><br/>' +
'<span style="padding-left: 16px">下四分位数:{q1}</span><br/>' +
'<span style="padding-left: 16px">最小值:{low}</span><br/>' +
'</li>',
});
chart.coordinate('polar', { innerRadius: 0.5 });
chart
.schema()
.position('x*range')
.shape('box')
.size(60)
.color('x')
.tooltip('x*low*q1*median*q3*high', (x, low, q1, median, q3, high) => {
return {
name: x,
low,
q1,
median,
q3,
high,
};
});
chart.render();
G2 会在 component.update() 方法中 https://github.com/antvis/G2/blob/4.x/src/chart/controller/axis.ts#L314 将 animate: true 以及 animateOption 的属性传入,但是 component 层并没有按照传入的配置将 animate 属性更新为 true.
@dxq613
原因: 图例没有按照传入的 maxWidth 进行布局导致的。
chart.legend(false);
即可绘制正确。
@dxq613
组件 bbox 问题,导致轴被画布裁剪。@dxq613 line 没有绘制,所以 bbox 不正确。
@dxq613
[x] hightlight 交互,当鼠标移入 tooltip 再移入画布时,原先高亮的 shape 没有恢复至原始状态
[x] 图例项表现出被剪切的样子 http://localhost:8000/zh/examples/interaction/interaction#legend-active
[x] 分类图例过滤有问题 http://localhost:8000/zh/examples/interaction/interaction#legend-filter
[x] 连续图例过滤不生效,同时连续图例中间部分未提供拖拽功能 http://localhost:8000/zh/examples/interaction/interaction#continue-legend-filter
http://localhost:8000/zh/examples/interaction/interaction#element-brush
交互行为相关问题整理
我定位了一下:
本周应该能够修复大部分,scale 相关的一起解决
直接调用 chart.changeSize(); 复现,必现
@hustcc
复现 demo:
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 3500 },
{ genre: 'Other', sold: 150 }
];
const chart = new Chart({
container: createDiv(),
autoFit: false,
width: 380,
height: 300,
});
chart.data(data);
chart.scale('sold', {
max: 3600,
nice: false,
});
// chart.coordinate().transpose();
chart.interval().position('genre*sold').color('genre').label('sold');
chart.render();
chart 和子 view 之间的 coordinateBBox 不会进行 同步。但是有两个解法:
showTitle
配置未生效 @hustcc chart
.coordinate('rect')
.transpose()
.scale(1, -1);
http://localhost:8000/zh/examples/map/map#bubble-map
Important
必须写测试用例保证了!!!
伙伴们很给力,就此结贴!