g2plot 双轴图加线图 不能实现分组柱形图双y轴

[18211365467]

• G2 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

[pearmini]

G2 5.0 代码：

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

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

chart.options({
  type: "view",
  data: [
    { time: "10:10", call: 4, waiting: 2, people: 2 },
    { time: "10:15", call: 2, waiting: 6, people: 3 },
    { time: "10:20", call: 13, waiting: 2, people: 5 },
    { time: "10:25", call: 9, waiting: 9, people: 1 },
    { time: "10:30", call: 5, waiting: 2, people: 3 },
    { time: "10:35", call: 8, waiting: 2, people: 1 },
    { time: "10:40", call: 13, waiting: 1, people: 2 },
  ],
  children: [
    {
      type: "interval",
      encode: {
        x: "time",
        y: "waiting",
        color: () => "waiting",
        series: () => "waiting",
      },
      axis: { y: { title: "Waiting" } },
    },
    {
      type: "interval",
      encode: {
        x: "time",
        y: "people",
        color: () => "people",
        series: () => "people",
      },
      scale: { y: { independent: true } },
      axis: { y: { position: "right", grid: null, title: "People" } },
    },
  ],
});

chart.render();

[pearmini]

这个问题的答案：

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

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

chart.options({
  type: 'view',
  data: [
    { time: '10:10', call: 4, waiting: 2, people: 2 },
    { time: '10:15', call: 2, waiting: 6, people: 3 },
    { time: '10:20', call: 13, waiting: 2, people: 5 },
    { time: '10:25', call: 9, waiting: 9, people: 1 },
    { time: '10:30', call: 5, waiting: 2, people: 3 },
    { time: '10:35', call: 8, waiting: 2, people: 1 },
    { time: '10:40', call: 13, waiting: 1, people: 2 },
  ],
  children: [
    {
      type: 'interval',
      encode: {
        x: 'time',
        y: 'waiting',
        color: () => 'waiting',
        series: () => 'waiting',
      },
      scale: { y: { nice: true } },
      axis: { y: { title: null } },
    },
    {
      type: 'interval',
      encode: {
        x: 'time',
        y: 'people',
        color: () => 'people',
        series: () => 'people',
      },
      scale: { y: { independent: true } },
      axis: { y: { position: 'right', grid: null, title: null } },
    },
    {
      type: 'line',
      encode: {
        x: 'time',
        y: 'call',
        color: () => 'call',
      },
      scale: { series: { independent: true } },
    },
  ],
});

chart.render();

[pearmini]

更进一步：

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

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

chart.options({
  type: "view",
  data: [
    { time: "10:10", call: 4, waiting: 2, people: 2, mock: 3 },
    { time: "10:15", call: 2, waiting: 6, people: 3, mock: 4 },
    { time: "10:20", call: 13, waiting: 2, people: 5, mock: 1 },
    { time: "10:25", call: 9, waiting: 9, people: 1, mock: 2 },
    { time: "10:30", call: 5, waiting: 2, people: 3, mock: 5 },
    { time: "10:35", call: 8, waiting: 2, people: 1, mock: 3 },
    { time: "10:40", call: 13, waiting: 1, people: 2, mock: 2 },
  ],
  children: [
    {
      type: "interval",
      encode: {
        x: "time",
        y: "waiting",
        color: () => "waiting",
        series: () => "waiting",
      },
      scale: { y: { nice: true } },
      axis: { y: { title: null } },
    },
    {
      type: "interval",
      encode: {
        x: "time",
        y: "people",
        color: () => "people",
        series: () => "people",
      },
      scale: { y: { key: "2" } },
      axis: { y: { position: "right", grid: null, title: null } },
    },
    {
      type: "line",
      encode: {
        x: "time",
        y: "call",
        color: () => "call",
      },
      scale: { series: { independent: true } },
    },
    {
      type: "line",
      encode: {
        x: "time",
        y: "mock",
        color: () => "mock",
      },
      scale: { y: { key: "2" }, series: { independent: true } },
    },
  ],
});

chart.render();

[pearmini]

更进一步：

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

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

chart.options({
  type: 'view',
  data: [
    { time: '10:10', call: 4, waiting: 2, people: 2, mock: 3 },
    { time: '10:15', call: 2, waiting: 6, people: 3, mock: 4 },
    { time: '10:20', call: 13, waiting: 2, people: 5, mock: 1 },
    { time: '10:25', call: 9, waiting: 9, people: 1, mock: 2 },
    { time: '10:30', call: 5, waiting: 2, people: 3, mock: 5 },
    { time: '10:35', call: 8, waiting: 2, people: 1, mock: 3 },
    { time: '10:40', call: 13, waiting: 1, people: 2, mock: 2 },
  ],
  children: [
    {
      type: 'interval',
      data: {
        transform: [{ type: 'fold', fields: ['call', 'waiting'] }],
      },
      encode: {
        x: 'time',
        y: 'value',
        color: 'key',
        series: () => 'a',
      },
      transform: [{ type: 'stackY' }],
      scale: { y: { nice: true } },
      axis: { y: { title: null } },
    },
    {
      type: 'interval',
      encode: {
        x: 'time',
        y: 'people',
        color: () => 'people',
        series: () => 'b',
      },
    },
    {
      type: 'interval',
      encode: {
        x: 'time',
        y: 'mock',
        color: () => 'mock',
        series: () => 'c',
      },
      scale: {
        y: { independent: true },
      },
      axis: {
        y: { position: 'right' },
      },
    },
  ],
});

chart.render();

[pearmini]

简单重构一下：

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

const xField = 'time';
const leftFields = [['call', 'waiting'], 'people'];
const rightFields = ['mock'];

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

chart.options({
  type: 'view',
  data: [
    { time: '10:10', call: 4, waiting: 2, people: 2, mock: 3 },
    { time: '10:15', call: 2, waiting: 6, people: 3, mock: 4 },
    { time: '10:20', call: 13, waiting: 2, people: 5, mock: 1 },
    { time: '10:25', call: 9, waiting: 9, people: 1, mock: 2 },
    { time: '10:30', call: 5, waiting: 2, people: 3, mock: 5 },
    { time: '10:35', call: 8, waiting: 2, people: 1, mock: 3 },
    { time: '10:40', call: 13, waiting: 1, people: 2, mock: 2 },
  ],
  children: [
    ...marks('left', xField, leftFields),
    ...marks('right', xField, rightFields),
  ],
});

chart.render();

function marks(position, xField, fields) {
  return fields.map((d, index) => {
    if (Array.isArray(d))
      return {
        type: 'interval',
        data: {
          transform: [{ type: 'fold', fields: d }],
        },
        encode: {
          x: xField,
          y: 'value',
          color: 'key',
          series: () => `(${position}, ${index})`,
        },
        transform: [{ type: 'stackY' }],
        scale: { y: { key: position } },
        axis: { y: { title: null, position } },
      };
    return {
      type: 'interval',
      encode: {
        x: xField,
        y: d,
        color: () => d,
        series: () => `(${position}, ${index})`,
      },
      scale: { y: { key: position } },
      axis: { y: { title: null, position } },
    };
  });
}