Replies: 1 comment 1 reply
-
实现方式是自己加text, 不用mark.但是有没有啥好的办法能处理啊 |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
注意: 一定是全局(这里只是举个例子.实际情况下是双轴图,希望两个轴之间能重叠隐藏,但是又希望辅助线的值强制显示,这里只是示例展示隐藏的效果!!!)
代码:
/**
*/
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart
.data([
{ Day: 1, Value: 54.8 },
{ Day: 2, Value: 112.1 },
{ Day: 3, Value: 63.6 },
{ Day: 4, Value: 37.6 },
{ Day: 5, Value: 79.7 },
{ Day: 6, Value: 137.9 },
{ Day: 7, Value: 120.1 },
{ Day: 8, Value: 103.3 },
{ Day: 9, Value: 394.8 },
{ Day: 10, Value: 199.5 },
{ Day: 11, Value: 72.3 },
{ Day: 12, Value: 51.1 },
{ Day: 13, Value: 112.0 },
{ Day: 14, Value: 174.5 },
{ Day: 15, Value: 300.5 },
])
.axis('y', { title: false });
chart.interval().encode('x', 'Day').encode('y', 'Value').label({
text: 'genre', // 指定绑定的字段
style: {
dy: -15, // 指定样式
},
});
chart
.range()
.data({
transform: [
{
type: 'custom',
callback: (data) => overThreshold(data, 300),
},
],
})
.encode('x', 'x')
.encode('y', 'y')
.encode('color', '#F4664A');
chart
.lineY()
.data([300])
.style('stroke', '#F4664A')
.style('lineDash', [3, 3])
.style('arrow', true)
.label({
text: 'hazardous',
position: 'right',
textBaseline: 'bottom',
fill: '#F4664A',
background: true,
backgroundFill: '#F4664A',
backgroundOpacity: 0.25,
});
chart.labelTransform({ type: 'overlapHide' });
chart.render();
// Process data.
function overThreshold(data, threshold) {
return data
.filter((d) => d['Value'] >= threshold)
.map(({ Day: x, Value: y }) => ({ x: [x, x], y: [threshold, y] }));
}
Beta Was this translation helpful? Give feedback.
All reactions