antv g2 plot 怎么不展现另外一个数字的y轴
时间: 2024-01-21 13:17:21 浏览: 154
ANTV G2 3.2 使用教程.pdf
如果您想在 G2 Plot 中展示另一个数字的 y 轴,可以使用 `dual-axes`(双轴)模式。以下是一个简单的示例代码:
```javascript
import { Chart } from '@antv/g2';
const data = [
{ year: '1991', value: 15468, count: 110 },
{ year: '1992', value: 16100, count: 90 },
{ year: '1993', value: 15900, count: 120 },
{ year: '1994', value: 17409, count: 150 },
{ year: '1995', value: 17000, count: 170 },
{ year: '1996', value: 31056, count: 200 },
{ year: '1997', value: 31982, count: 250 },
{ year: '1998', value: 32040, count: 300 },
{ year: '1999', value: 33233, count: 350 },
{ year: '2000', value: 34241, count: 400 },
{ year: '2001', value: 34368, count: 450 },
{ year: '2002', value: 32961, count: 500 },
{ year: '2003', value: 34434, count: 550 },
{ year: '2004', value: 35521, count: 600 },
{ year: '2005', value: 35415, count: 650 },
{ year: '2006', value: 37790, count: 700 },
{ year: '2007', value: 41000, count: 750 },
{ year: '2008', value: 40603, count: 800 },
{ year: '2009', value: 50000, count: 850 },
{ year: '2010', value: 55000, count: 900 },
{ year: '2011', value: 55200, count: 950 },
{ year: '2012', value: 58400, count: 1000 },
{ year: '2013', value: 60000, count: 1050 },
{ year: '2014', value: 60200, count: 1100 },
{ year: '2015', value: 62000, count: 1150 },
{ year: '2016', value: 65000, count: 1200 },
{ year: '2017', value: 66000, count: 1250 },
{ year: '2018', value: 67600, count: 1300 },
{ year: '2019', value: 68700, count: 1350 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
});
chart.data(data);
// 配置 value 轴
chart.scale('value', {
nice: true,
});
// 配置 count 轴
chart.scale('count', {
nice: true,
});
// 绘制 value 系列数据
chart
.line()
.position('year*value')
.color('red');
// 绘制 count 系列数据
chart
.line()
.position('year*count')
.color('blue')
.axis('count', {
label: {
formatter: (val) => `${val} 个`,
},
});
// 开启双轴模式
chart.axis('count', {
grid: null,
line: null,
tickLine: null,
});
chart.axis('value', {
label: {
formatter: (val) => `$${val}`,
},
});
chart.render();
```
在这个示例中,我们使用了 `dual-axes` 模式来同时展示 `value` 和 `count` 两个数字的 y 轴。其中 `value` 轴使用了默认的设置,而 `count` 轴则进行了定制化,例如添加了单位(个),并且取消了其网格、线条和刻度线。
希望能对您有所帮助!
阅读全文