二酸化炭素排出量のソース

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

fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
  .then((response) => response.json())
  .then((chartData) => {
    const emissionsChart = new Line('container', {
      data: chartData,
      xField: 'year',
      yField: 'value',
      seriesField: 'category',
      xAxis: {
        type: 'time',
      },
      yAxis: {
        label: {
          // 数値を千位区切りにフォーマット
          formatter: (val) => `${val}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (segment) => `${segment},`),
        },
      },
    });

    emissionsChart.render();
  });

グリッドと塗りつぶし

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

fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
  .then((response) => response.json())
  .then((rawData) => {
    // データをフィルタリングして最新90件と特定のカテゴリのみを抽出
    const filteredData = rawData.filter(item => ['Gas fuel', 'Cement production'].includes(item.category));

    const multiLineChart = new Line('container', {
      data: filteredData,
      xField: 'year',
      yField: 'value',
      seriesField: 'category',
      // X軸の設定
      xAxis: {
        nice: true,
        label: {
          rotate: Math.PI / 6,
          offset: 12,
          style: {
            fill: '#888',
            fontSize: 11,
          },
          formatter: (year) => year,
        },
        title: {
          text: '年',
          style: { fontSize: 14 },
        },
        line: { style: { stroke: '#888' } },
        tickLine: { style: { lineWidth: 1, stroke: '#888' }, length: 4 },
        grid: {
          line: { style: { stroke: '#ddd', lineDash: [3, 3] } },
          alternateColor: 'rgba(0,0,0,0.03)',
        },
      },
      // Y軸の設定
      yAxis: {
        label: {
          autoRotate: false,
          style: { fill: '#888', fontSize: 11 },
          formatter: (val) => `${val}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (segment) => `${segment},`),
        },
        title: {
          text: '排出量(トン)',
          style: { fontSize: 14 },
        },
        line: { style: { stroke: '#888' } },
        tickLine: { style: { lineWidth: 1, stroke: '#888' }, length: 4 },
        grid: {
          line: { style: { stroke: '#ddd', lineDash: [3, 3] } },
          alternateColor: 'rgba(0,0,0,0.03)',
        },
      },
      // ラベルの設定
      label: {
        layout: [{ type: 'hide-overlap' }],
        style: { textAlign: 'left' },
        formatter: (item) => item.value,
      },
      // ポイントの設定
      point: {
        size: 4,
        style: { lineWidth: 1, fillOpacity: 1 },
        shape: (item) => {
          // 'Cement production' の場合は円、それ以外はダイヤモンド
          return item.category === 'Cement production' ? 'circle' : 'diamond';
        },
      },
      // 注釈の設定
      annotations: [
        {
          type: 'line',
          start: ['0%', '15%'],
          end: ['100%', '15%'],
          top: true,
          style: {
            stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
            lineWidth: 2,
          },
        },
        {
          type: 'region',
          start: ['0%', '0%'],
          end: ['15%', '15%'],
          top: true,
          style: {
            fill: '#1890ff',
            fillOpacity: 0.8,
          },
        },
        {
          type: 'text',
          position: ['8%', '8%'],
          content: '二酸化炭素排出量のソース',
          style: {
            fill: '#fff',
            fontSize: 11,
            textAlign: 'center',
            textBaseline: 'middle',
            shadowColor: '#fff',
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowBlur: 2,
          },
        },
        {
          type: 'line',
          start: ['min', 'median'],
          end: ['max', 'median'],
          style: {
            stroke: 'Turquoise',
            lineDash: [5, 3],
          },
        },
      ],
      legend: {
        position: 'top-right',
        itemName: {
          style: { fill: '#000' },
          formatter: (name) => name,
        },
      },
      meta: {
        year: { range: [0, 1] },
      },
    });

    multiLineChart.render();
  });

アニメーション効果

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

fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
  .then((response) => response.json())
  .then((gdpData) => {
    const gdpChart = new Line('container', {
      data: gdpData,
      xField: 'year',
      yField: 'gdp',
      seriesField: 'name',
      yAxis: {
        label: {
          formatter: (val) => `${(val / 10e8).toFixed(1)} 兆`,
        },
      },
      legend: { position: 'top' },
      smooth: true,
      animation: {
        appear: {
          animation: 'path-in',
          duration: 4000,
        },
      },
    });

    gdpChart.render();
  });

エリア塗りつぶし

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

fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
  .then((response) => response.json())
  .then((areaData) => {
    const areaChart = new Line('container', {
      data: areaData,
      xField: 'year',
      yField: 'gdp',
      seriesField: 'name',
      yAxis: {
        label: {
          formatter: (val) => `${(val / 10e8).toFixed(1)} 兆`,
        },
      },
      legend: { position: 'top' },
      smooth: true,
      // エリア塗りつぶしの設定
      area: {
        style: {
          fillOpacity: 0.2,
        },
      },
      animation: {
        appear: {
          animation: 'wave-in',
          duration: 2500,
        },
      },
    });

    areaChart.render();
  });

折線の色を指定する

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

fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
  .then((response) => response.json())
  .then((colorData) => {
    const colorChart = new Line('container', {
      data: colorData,
      xField: 'year',
      yField: 'value',
      seriesField: 'category',
      yAxis: {
        label: {
          // 数値を千位区切りにフォーマット
          formatter: (val) => `${val}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (segment) => `${segment},`),
        },
      },
      color: ['#1979C9', '#D62A0D', '#FAA219'],
    });

    colorChart.render();
  });

コールバック関数で折線のスタイルを指定する

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

fetch('https://gw.alipayobjects.com/os/bmw-prod/c48dbbb1-fccf-4a46-b68f-a3ddb4908b68.json')
  .then((response) => response.json())
  .then((styleData) => {
    const styleChart = new Line('container', {
      data: styleData,
      xField: 'date',
      yField: 'value',
      yAxis: {
        label: {
          // 数値を千位区切りにフォーマット
          formatter: (val) => `${val}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (segment) => `${segment},`),
        },
      },
      seriesField: 'type',
      color: ({ type }) => {
        const colorMap = {
          register: '#F4664A',
          download: '#30BF78',
          default: '#FAAD14',
        };
        return colorMap[type] || colorMap.default;
      },
      lineStyle: ({ type }) => {
        if (type === 'register') {
          return {
            lineDash: [6, 3],
            opacity: 1,
          };
        }
        return {
          opacity: 0.6,
        };
      },
    });

    styleChart.render();
  });

コールバック関数でデータポイントのスタイルを指定する

import { Line } from '@antv/g2plot';
import { uniq, findIndex } from '@antv/util';

fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
  .then((response) => response.json())
  .then((pointData) => {
    const COLOR_PALETTE = [
      '#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E8684A',
      '#6DC8EC', '#9270CA', '#FF9D4D', '#269A99', '#FF99C3',
    ];

    const pointChart = new Line('container', {
      data: pointData,
      xField: 'year',
      yField: 'value',
      seriesField: 'category',
      yAxis: {
        label: {
          // 数値を千位区切りにフォーマット
          formatter: (val) => `${val}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (segment) => `${segment},`),
        },
      },
      color: COLOR_PALETTE,
      point: {
        shape: ({ category }) => {
          // 'Gas fuel' の場合は四角、それ以外は円
          return category === 'Gas fuel' ? 'square' : 'circle';
        },
        style: ({ year }) => {
          // 5で割り切れる年ごとにポイントを表示
          return {
            r: Number(year) % 5 === 0 ? 3 : 0,
          };
        },
      },
    });

    pointChart.render();
  });