答疑：柱线混合，渲染不同的数据，x轴如何固定

[Calmio-Y]

问题描述

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

const 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 },
];

const data1 = [
{ time: '10:15', call: 2, waiting: 6, people: 3 },
{ time: '10:10', call: 4, waiting: 2, people: 2 },
{ time: '10:20', call: 13, waiting: 2, people: 5 },
{ time: '10:25', call: 9, waiting: 9, people: 1 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
});

chart
.data(data)
.interval()
.encode('x', 'time')
.encode('y', 'waiting')
.axis('y', { title: 'Waiting', titleFill: '#5B8FF9' })
.scale('x', {
domain: ['10:10', '10:15', '10:20', '10:25'],
});

chart
.data(data1)
.line()
.encode('x', 'time')
.encode('y', 'people')
.encode('shape', 'smooth')
.style('stroke', '#fdae6b')
.style('lineWidth', 2)
.scale('y', { independent: true })
.scale('x', {
domain: ['10:10', '10:15', '10:20', '10:25'],
})
.axis('y', {
position: 'right',
grid: null,
title: 'People',
titleFill: '#fdae6b',
});

chart.render();

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

补充说明（可选）

No response

[Calmio-Y]

有大佬看看吗

[sexxOyxin]

想知道+1