antvis / G2Plot

:dango: An interactive and responsive charting library based on G2.
https://g2plot.antv.antgroup.com
MIT License
2.56k stars 607 forks source link

[BUG] Multiview 添加 regionFilter annotation 后没有效果 #2490

Open SerenaLin2020 opened 3 years ago

SerenaLin2020 commented 3 years ago
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, 但是没有效果

visiky commented 3 years ago

只有 regionFilter 有问题,生命周期与其他不一致

JJack27 commented 3 years ago

这个Bug会被修复吗?

ai-qing-hai commented 3 years ago

这个Bug会被修复吗?

暂时 加入 animation: true 属性 可以解决。 g2上没有这个问题。 看后续 g2plot 的更新。 image