antvis/G2

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. 扩展阅读:如何向开源项目提交无法解答的问题 -->

  1. open https://g2plot.antv.vision/zh/examples/plugin/multi-view#range-area
  2. 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. -->


提交到 G2Plot

posted by visiky about 4 years ago

Fund this Issue

$0.00
Funded

Pull requests