fetch

Overview

G2 has two types of data sources: one is inline, which directly passes in specific data and is the default data source type in G2; the other data source type is fetch, which fetches data from remote interfaces.

G2’s fetch supports obtaining data from remote interfaces, making data sources dynamic. It supports parsing JSON, CSV and other formats, adapts to multi-scenario data integration, and improves development efficiency and interactive experience for applications like dashboards and monitoring systems. In terms of configuration, remote data is obtained based on the url specified by value. You can specify the data type through format. G2 will infer the data type based on the file extension specified by value by default. Make sure the remote address is not authentication-protected.

Usage

When setting data, directly pass in an object and set the type to fetch.

// Spec
chart.options({
  type: 'point',
  data: {
    type: 'fetch', // Specify fetch type
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json', // Remote address
  },
});

Getting Started

Here is an example:

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'point',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: {
    x: 'weight',
    y: 'height',
    color: 'gender',
  },
});

chart.render();

Configuration

In the fetch implementation, if format is json, it uses JavaScript’s fetch API and converts the return value to a JSON Object; if format is csv, it calls d3-dsv to parse the interface return value.

chart.options({
  type: 'point',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
});

开始使用

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'point',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: {
    x: 'weight',
    y: 'height',
    color: 'gender',
  },
});

chart.render();

选项