AntvG2Plot の基本的な使用法

1. 折れ線グラフ

公式サイトのコード

import { Line } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
  .then((res) => res.json())
  .then((data) => {
    const line = new Line('container', {
      data,
      padding: 'auto',
      xField: 'Date',
      yField: 'scales',
      xAxis: {
        // type: 'timeCat',
        tickCount: 5,
      },
    });

    line.render();
  });

レンダリング

1.1 チャートインスタンスを作成する

const line = new Line(コンテナ, オプション);

作成されたチャートインスタンスには 2 つのパブリックプロパティがあります。

コンテナ HTMLElement: チャートレンダリング用の DOM コンテナ。

options PlotOptions: チャートの現在のすべての完全な構成オプション。これは、ユーザー入力とチャートの組み込みのデフォルト構成項目をマージした結果です。

1.2 設定項目

1.2.1 データ (受信データ)

1.2.2 xField (x 軸フィールド、x 軸データはデータ内のデータ)

1.2.3 yField (y 軸フィールド、y 軸データはデータ内のデータ)

1.2.4 パディング（チャートの内側のマージン）

1.2.5 xAxis (x 軸構成)

2. 円グラフ

公式サイトのコード

import { Pie } from '@antv/g2plot';

const data = [
  { type: '分类一', value: 27 },
  { type: '分类二', value: 25 },
  { type: '分类三', value: 18 },
  { type: '分类四', value: 15 },
  { type: '分类五', value: 10 },
  { type: '其他', value: 5 },
];

const piePlot = new Pie('container', {
  appendPadding: 10,
  data,
  angleField: 'value',
  colorField: 'type',
  radius: 0.9,
  label: {
    type: 'inner',
    offset: '-30%',
    content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
    style: {
      fontSize: 14,
      textAlign: 'center',
    },
  },
  interactions: [{ type: 'element-active' }],
});

piePlot.render();

レンダリング

2.1 チャートインスタンスの作成

const line = new Line(コンテナ, オプション);

作成されたチャートインスタンスには 2 つのパブリックプロパティがあります。

コンテナ HTMLElement: チャートレンダリング用の DOM コンテナ。

2.2 設定項目

2.2.1 データ (受信データ)

2.2.2 appendPadding（四辺の余白を確保）

2.2.3 angleField (角度マッピングフィールド)

2.2.4 colorField（カラーマッピングフィールド）

2.2.5 半径 (円グラフの半径)

2.2.6 ラベル（円グラフラベル）

2.2.7 インタラクション (チャートインタラクション)

3. ヒストグラム

公式サイトのコード

import { Column } from '@antv/g2plot';

const data = [
  {
    type: '家具家电',
    sales: 38,
  },
  {
    type: '粮油副食',
    sales: 52,
  },
  {
    type: '生鲜水果',
    sales: 61,
  },
  {
    type: '美容洗护',
    sales: 145,
  },
  {
    type: '母婴用品',
    sales: 48,
  },
  {
    type: '进口食品',
    sales: 38,
  },
  {
    type: '食品饮料',
    sales: 38,
  },
  {
    type: '家庭清洁',
    sales: 38,
  },
];

const columnPlot = new Column(document.getElementById('container'), {
  title: {
    visible: true,
    text: '基础柱状图',
  },
  forceFit: true,
  data,
  padding: 'auto',
  data,
  xField: 'type',
  yField: 'sales',
  meta: {
    type: {
      alias: '类别',
    },
    sales: {
      alias: '销售额(万)',
    },
  },
});

columnPlot.render();

レンダリング

3.1 チャートインスタンスの作成

const line = new Line(コンテナ, オプション);

作成されたチャートインスタンスには 2 つのパブリックプロパティがあります。

コンテナ HTMLElement: チャートレンダリング用の DOM コンテナ。

3.2 設定項目

3.2.1 タイトル（タイトルを表示するかどうか）

3.2.2 データ (受信データ)

3.2.3 xField (x 軸フィールド、x 軸データはデータ内のデータ)

3.2.4 yField (y 軸フィールド、y 軸データはデータ内のデータ)

3.2.5 メタ（グローバル構成図データのメタ情報）

おすすめ