缩略轴（Slider）

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

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

const formatter = (dateTimeString) => {
  return new Date(dateTimeString).toLocaleString();
};

chart.options({
  type: 'line',
  autoFit: true,
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  },
  encode: { x: 'date', y: 'close' },
  slider: {
    x: {
      labelFormatter: (d) => `${formatter(d)}`,
    },
  },
});

chart.render();

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

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

chart.options({
  type: 'line',
  autoFit: true,
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  },
  encode: { x: 'date', y: 'close' },
  slider: {
    x: {
      labelFormatter: (d) => {
        return new Date(d).toLocaleDateString();
      },
    },
  },
  interaction: {
    sliderWheel: {
      wheelSensitivity: 0.08,
      minRange: 0.02,
    },
  },
});

chart.render();

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

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

const data = [];
for (let i = 0; i < 150; i++) {
  data.push({
    x: i,
    y: Math.sin(i / 15) * 60 + 80 + Math.random() * 25,
    category: i % 3 === 0 ? 'A' : i % 3 === 1 ? 'B' : 'C',
  });
}

chart.options({
  type: 'point',
  data,
  encode: { x: 'x', y: 'y', color: 'category' },
  slider: {
    x: {
      values: [0.1, 0.8],
      labelFormatter: (d) => `X: ${Math.round(d)}`,
    },
  },
  style: {
    fillOpacity: 0.8,
  },
});

chart.render();

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

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

chart.options({
  type: 'view',
  autoFit: true,
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/stocks.json',
    transform: [{ type: 'filter', callback: (d) => d.symbol === 'GOOG' }],
  },
  slider: {
    x: {},
  },
  children: [
    {
      type: 'area',
      encode: { x: (d) => new Date(d.date), y: 'price' },
      style: { fill: 'linear-gradient(-90deg, white 0%, darkgreen 100%)' },
    },
    {
      type: 'line',
      encode: { x: (d) => new Date(d.date), y: 'price' },
      style: { stroke: 'darkgreen', lineWidth: 2 },
    },
  ],
});

chart.render();

import { Chart } from '@antv/g2';
import { randomPoisson } from 'd3-random';

const random = randomPoisson(Math.pow(10, 2.6));
const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.options({
  type: 'rect',
  data: new Array(5000).fill(0).map(random),
  encode: { x: (d) => d },
  transform: [{ type: 'binX', y: 'count' }],
  style: { stroke: 'white' },
  slider: { x: {} },
  tooltip: {
    title: (d, i, data, column) => ({
      value: `${column.x.value[i]} ~ ${column.x1.value[i]}`,
    }),
  },
});

chart.render();

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

const chart = new Chart({
  container: 'container',
  autoFit: true,
  inset: 3, // 设置内边距，防止自适应过程中 point被截断
});

const data = [
  { time: 0, sales: 200, profit: 150, revenue: 600 }, // 起始高值
  { time: 1, sales: 195, profit: 145, revenue: 580 },
  { time: 2, sales: 190, profit: 140, revenue: 560 },
  { time: 3, sales: 185, profit: 135, revenue: 540 },
  { time: 4, sales: 180, profit: 130, revenue: 520 },
  { time: 5, sales: 175, profit: 125, revenue: 500 },
  { time: 6, sales: 170, profit: 120, revenue: 480 },
  { time: 7, sales: 165, profit: 115, revenue: 460 },
  { time: 8, sales: 160, profit: 110, revenue: 440 },
  { time: 9, sales: 155, profit: 105, revenue: 420 },
  { time: 10, sales: 150, profit: 100, revenue: 400 },
  { time: 11, sales: 145, profit: 95, revenue: 380 },
  { time: 12, sales: 140, profit: 90, revenue: 360 },
  { time: 13, sales: 135, profit: 85, revenue: 340 },
  { time: 14, sales: 130, profit: 80, revenue: 320 },
  { time: 15, sales: 125, profit: 75, revenue: 300 },
  { time: 16, sales: 120, profit: 70, revenue: 280 },
  { time: 17, sales: 115, profit: 65, revenue: 260 },
  { time: 18, sales: 110, profit: 60, revenue: 240 },
  { time: 19, sales: 105, profit: 55, revenue: 220 },
  { time: 20, sales: 100, profit: 50, revenue: 200 },
  { time: 21, sales: 95, profit: 45, revenue: 180 },
  { time: 22, sales: 90, profit: 40, revenue: 160 },
  { time: 23, sales: 85, profit: 35, revenue: 140 },
  { time: 24, sales: 80, profit: 30, revenue: 120 },
];

chart.options({
  type: 'view',
  data,
  children: [
    {
      type: 'line',
      encode: { x: 'time', y: 'sales' },
      style: { stroke: '#1890ff', lineWidth: 2 },
    },
    {
      type: 'line',
      encode: { x: 'time', y: 'profit' },
      style: { stroke: '#52c41a', lineWidth: 2 },
    },
    {
      type: 'point',
      encode: { x: 'time', y: 'revenue', size: 3 },
      style: { fill: '#ff4d4f' },
    },
  ],
  slider: {
    x: {
      labelFormatter: (d) => `时间: ${Math.round(d)}`,
    },
  },
});

chart.render();

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

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

const data = [];
for (let i = 0; i < 60; i++) {
  data.push({
    date: `Day-${i + 1}`,
    sales: Math.sin(i / 10) * 300 + 800 + Math.random() * 200,
    profit: Math.cos(i / 8) * 50 + 75 + Math.random() * 25,
    revenue: Math.sin(i / 12) * 800 + 1500 + Math.random() * 300,
  });
}

chart.options({
  type: 'view',
  data,
  children: [
    {
      type: 'interval',
      encode: { x: 'date', y: 'sales' },
      scale: { y: { nice: true } },
      style: { fill: '#1890ff', fillOpacity: 0.6 },
    },
    {
      type: 'line',
      encode: { x: 'date', y: 'profit' },
      scale: {
        y: {
          key: 'y1',
          independent: true,
          nice: true,
        },
      },
      style: { stroke: '#ff4d4f', lineWidth: 3 },
    },
    {
      type: 'area',
      encode: { x: 'date', y: 'revenue' },
      scale: {
        y: {
          key: 'y2',
          independent: true,
          nice: true,
        },
      },
      style: { fill: '#52c41a', fillOpacity: 0.4 },
    },
  ],
  // View 层级配置缩略轴，自适应同时影响所有轴
  slider: {
    x: {
      labelFormatter: (d) => d,
    },
  },
});

chart.render();

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

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

const data = [];
for (let i = 0; i < 60; i++) {
  data.push({
    date: `Day-${i + 1}`,
    sales: Math.sin(i / 10) * 300 + 800 + Math.random() * 200,
    profit: Math.cos(i / 8) * 50 + 75 + Math.random() * 25,
    revenue: Math.sin(i / 12) * 800 + 1500 + Math.random() * 300,
  });
}

chart.options({
  type: 'view',
  data,
  children: [
    {
      type: 'interval',
      encode: { x: 'date', y: 'sales' },
      scale: { y: { nice: true } },
      style: { fill: '#1890ff', fillOpacity: 0.6 },
      // Mark 层级 slider，自适应只作用于当前 mark 对应的轴
      slider: {
        x: {
          labelFormatter: (d) => d,
        },
      },
    },
    {
      type: 'line',
      encode: { x: 'date', y: 'profit' },
      scale: {
        y: {
          key: 'y1',
          independent: true,
          nice: true,
        },
      },
      style: { stroke: '#ff4d4f', lineWidth: 3 },
    },
    {
      type: 'area',
      encode: { x: 'date', y: 'revenue' },
      scale: {
        y: {
          key: 'y2',
          independent: true,
          nice: true,
        },
      },
      style: { fill: '#52c41a', fillOpacity: 0.4 },
    },
  ],
});

chart.render();

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

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

const data = [];
for (let i = 0; i < 300; i++) {
  const x = Math.random() * 100;
  const y = x * 0.7 + Math.random() * 30 + 10;
  data.push({
    x,
    y,
    size: Math.random() * 8 + 3,
    category: Math.random() > 0.5 ? 'A' : 'B',
  });
}

chart.options({
  type: 'point',
  data,
  encode: {
    x: 'x',
    y: 'y',
    size: 'size',
    color: 'category',
  },
  // 同时配置 X 和 Y 轴缩略轴，此时自适应不会生效
  slider: {
    x: {
      values: [0.2, 0.8],
      labelFormatter: (d) => `X: ${Math.round(d)}`,
    },
    y: {
      values: [0.1, 0.9],
      labelFormatter: (d) => `Y: ${Math.round(d)}`,
    },
  },
  scale: {
    x: { nice: true },
    y: { nice: true },
  },
  style: {
    fillOpacity: 0.7,
  },
});

chart.render();

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

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

chart.options({
  type: 'line',
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  },
  encode: { x: 'date', y: 'close' },
  slider: {
    x: {
      labelFormatter: (d) => new Date(d).toLocaleDateString(),
      style: {
        // 自定义手柄图标形状
        handleIconShape: (type) => {
          // type 参数为 'start' 或 'end'，分别表示左右手柄
          return new Circle({
            style: {
              r: 8,
              fill: type === 'start' ? '#1890FF' : '#52C41A',
              stroke: '#fff',
              lineWidth: 2,
              shadowColor: type === 'start' ? '#1890FF' : '#52C41A',
              shadowBlur: 10,
            },
          });
        },
        handleIconSize: 16,
      },
    },
  },
});

chart.render();

import * as G2 from '@antv/g2';

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

function sliderX(chart) {
  // 创建并且挂载 range
  const container = chart.getContainer();
  const range = document.createElement('input');
  container.append(range);

  // 根据 coordinate 设置 range 的宽度等属性
  const coordinate = chart.getCoordinate();
  const { paddingLeft, width } = coordinate.getOptions();
  range.type = 'range';
  range.min = 0;
  range.max = width;
  range.value = width;
  range.style.display = 'block';
  range.style.width = width + 'px';
  range.style.marginLeft = paddingLeft + 'px';

  // 监听 change 事件，通过 scale 获得筛选得到的 domain
  // 更新 domain 并且渲染
  const scale = chart.getScaleByChannel('x');
  const options = chart.options();
  range.onchange = (event) => {
    const value = event.target.value;
    const range = [0, value / width];
    const domain = range.map((d) => scale.invert(d));
    chart.options({
      ...options,
      scale: { x: { domain } },
    });
    chart.render();
  };
}

// 渲染图表
chart.options({
  type: 'line',
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  },
  encode: { x: 'date', y: 'close' },
});

chart.render().then(sliderX);

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

const chart2 = new Chart({
  container: 'container',
  autoFit: true,
});

// 标准的G2数据结构 - 不同类型的数据，添加极高值展示自适应效果
const data2 = [
  { category: 'A', time: 0, value: 45, type: 'primary' },
  { category: 'A', time: 1, value: 52, type: 'primary' },
  { category: 'A', time: 2, value: 48, type: 'primary' },
  { category: 'A', time: 3, value: 10, type: 'primary' },
  { category: 'A', time: 4, value: 55, type: 'primary' },
  { category: 'A', time: 5, value: 67, type: 'primary' },
  { category: 'A', time: 6, value: 43, type: 'primary' },
  { category: 'A', time: 7, value: 66, type: 'primary' },
  { category: 'A', time: 8, value: 63, type: 'primary' },
  { category: 'A', time: 9, value: 71, type: 'primary' },
  { category: 'A', time: 10, value: 58, type: 'primary' },
  { category: 'A', time: 11, value: 44, type: 'primary' },
  { category: 'A', time: 12, value: 49, type: 'primary' },
  { category: 'A', time: 13, value: 66, type: 'primary' },
  { category: 'A', time: 14, value: 54, type: 'primary' },
  { category: 'B', time: 0, value: 32, type: 'secondary' },
  { category: 'B', time: 1, value: 38, type: 'secondary' },
  { category: 'B', time: 2, value: 29, type: 'secondary' },
  { category: 'B', time: 3, value: 44, type: 'secondary' },
  { category: 'B', time: 4, value: 41, type: 'secondary' },
  { category: 'B', time: 5, value: 20, type: 'secondary' },
  { category: 'B', time: 6, value: 28, type: 'secondary' },
  { category: 'B', time: 7, value: 39, type: 'secondary' },
  { category: 'B', time: 8, value: 35, type: 'secondary' },
  { category: 'B', time: 9, value: 48, type: 'secondary' },
  { category: 'B', time: 10, value: 35, type: 'secondary' },
  { category: 'B', time: 11, value: 42, type: 'secondary' },
  { category: 'B', time: 12, value: 31, type: 'secondary' },
  { category: 'B', time: 13, value: 45, type: 'secondary' },
  { category: 'B', time: 14, value: 37, type: 'secondary' },
  { category: 'C', time: 0, value: 28, type: 'tertiary' },
  { category: 'C', time: 1, value: 31, type: 'tertiary' },
  { category: 'C', time: 2, value: 25, type: 'tertiary' },
  { category: 'C', time: 3, value: 35, type: 'tertiary' },
  { category: 'C', time: 4, value: 185, type: 'tertiary' }, // 极高值
  { category: 'C', time: 5, value: 38, type: 'tertiary' },
  { category: 'C', time: 6, value: 22, type: 'tertiary' },
  { category: 'C', time: 7, value: 29, type: 'tertiary' },
  { category: 'C', time: 8, value: 45, type: 'tertiary' },
  { category: 'C', time: 9, value: 36, type: 'tertiary' },
  { category: 'C', time: 10, value: 31, type: 'tertiary' },
  { category: 'C', time: 11, value: 27, type: 'tertiary' },
  { category: 'C', time: 12, value: 105, type: 'tertiary' }, // 极高值
  { category: 'C', time: 13, value: 33, type: 'tertiary' },
  { category: 'C', time: 14, value: 29, type: 'tertiary' },
];

chart2.options({
  type: 'view',
  data: data2,
  children: [
    {
      type: 'interval',
      data: {
        value: data2,
        transform: [{ type: 'filter', callback: (d) => d.type === 'primary' }],
      },
      encode: { x: 'time', y: 'value' },
      style: { fill: '#1890ff', fillOpacity: 0.6 },
      // Mark 层级配置 - 仅控制柱状图的过滤
      slider: {
        x: {
          values: [0.2, 0.7],
          labelFormatter: (d) => `柱状图: ${Math.round(d)}`,
        },
      },
    },
    {
      type: 'line',
      data: {
        value: data2,
        transform: [
          { type: 'filter', callback: (d) => d.type === 'secondary' },
        ],
      },
      encode: { x: 'time', y: 'value' },
      style: { stroke: '#52c41a', lineWidth: 2 },
    },
    {
      type: 'point',
      data: {
        value: data2,
        transform: [{ type: 'filter', callback: (d) => d.type === 'tertiary' }],
      },
      encode: { x: 'time', y: 'value', size: 4 },
      style: { fill: '#ff4d4f', fillOpacity: 0.8 },
    },
  ],
  scale: {
    x: { nice: true },
    y: { nice: true },
  },
});

chart2.render();