Bug Multiview 的annotation没效果 #3363
SerenaLin2020 posted onGitHub
<!-- Thank you for reporting an issue. 1. It's RECOMMENDED to submit PR for typo or tiny bug fix. 2. If this's a FEATURE request, please provide: details, pseudo codes if necessary. 3. If this's a BUG, please provide: course repetition, error log and configuration. Fill in as much of the template below as you're able. 4. It will be nice to use to provide a CodePen Link which can reproduce the issue, we provide a CodePen template g2-github-issue. 感谢您向我们反馈问题。 1. 提交问题前,请先阅读 https://antv.alipay.com/zh-cn/g2/3.x/index.html 上的文档。 2. 我们推荐如果是小问题(错别字修改,小的 bug fix)直接提交 PR。 3. 如果是一个新需求,请提供:详细需求描述,最好是有伪代码实现。 4. 如果是一个 BUG,请提供:复现步骤,错误日志以及相关配置,并尽量填写下面的模板中的条目。 5. 如果可以,请提供尽可能精简的 CodePen 链接,可使用 CodePen 模板 https://codepen.io/leungwensen/pen/WXJgox,方便我们排查问题。 6. 扩展阅读:如何向开源项目提交无法解答的问题 -->
G2 Version: 4.1.0
Platform: macOS
Mini Showcase(like screenshots):
<img width="872" alt="Screen Shot 2021-04-07 at 3 34 00 PM" src="https://user-images.githubusercontent.com/74633110/113828300-d0ed8080-97b6-11eb-85f2-221990d54a20.png">
Steps to reporduce:
- open https://g2plot.antv.vision/zh/examples/plugin/multi-view#range-area
- paste the following code to this website
import { MultiView } from '@antv/g2plot';
fetch('https://gw.alipayobjects.com/os/antfincdn/qE48lpzwRc/range-area-data.json')
.then((data) => data.json())
.then((data) => {
const { area: data1, line: data2 } = data;
const rangeAreaPlot = new MultiView('container', {
appendPadding: 8,
syncViewPadding: true,
tooltip: { shared: true, showMarkers: false, showCrosshairs: true, offsetY: -50 },
views: [
{
data: data1,
axes: {},
meta: {
time: {
type: 'time',
mask: 'YYYY-MM-DD',
nice: true,
tickInterval: 24 * 3600 * 1000 * 2,
range: [0, 1],
},
temperature: {
nice: true,
sync: true,
alias: '温度范围',
},
},
// view1: prepare a area plot, mapping position to `time*temperature`
geometries: [
{
type: 'area',
xField: 'time',
yField: 'temperature',
mapping: {},
},
]
},
{
data: data2,
axes: false,
meta: {
time: {
type: 'time',
mask: 'YYY-MM-DD',
nice: true,
tickInterval: 24 * 3600 * 1000 * 2,
range: [0, 1],
},
temperature: {
sync: 'temperature',
alias: '温度',
},
},
// view2: prepare a line plot and point plot, mapping position to `time*temperature` (share data)
geometries: [
{
type: 'line',
xField: 'time',
yField: 'temperature',
mapping: {},
},
{
type: 'point',
xField: 'time',
yField: 'temperature',
mapping: {
shape: 'circle',
style: {
fillOpacity: 1,
},
},
},
],
annotations: [
{
type: 'regionFilter',
start: ['2009-07-01', '22'],
end: ['2009-07-29', '0'],
color: 'red',
},
]
},
],
});
// Step 3: 渲染图表
rangeAreaPlot.render();
});
已经配置了line view的annotations, 但是没有效果
<!-- Enter your issue details below this comment. -->