antv g2plot 怎么不展现另外一个数字的y轴
时间: 2024-01-21 14:17:25 浏览: 246
快速上手AntV G2Plot
5星 · 资源好评率100%
如果你想在 G2Plot 中展现另外一个数字的 y 轴,你可以使用 `dual-axes`(双轴)的配置。这样就可以在同一个图表中展现两个不同范围的 y 轴了。
以下是一个双轴的示例代码:
```javascript
import { DualAxes } from '@antv/g2plot';
const data = [
{ year: '1991', value: 3, count: 10 },
{ year: '1992', value: 4, count: 4 },
{ year: '1993', value: 3.5, count: 5 },
{ year: '1994', value: 5, count: 5 },
{ year: '1995', value: 4.9, count: 4.9 },
{ year: '1996', value: 6, count: 35 },
{ year: '1997', value: 7, count: 7 },
{ year: '1998', value: 9, count: 1 },
{ year: '1999', value: 13, count: 2 },
];
const dualAxes = new DualAxes('container', {
data,
xField: 'year',
yField: ['value', 'count'],
yAxis: {
count: {
label: {
formatter: (value) => {
return `${value} 次`;
},
},
},
},
geometryOptions: [
// 配置 value y 轴
{ geometry: 'line', color: '#5B8FF9' },
{ geometry: 'point', color: '#5B8FF9' },
// 配置 count y 轴
{ geometry: 'line', color: '#5AD8A6', yAxisIndex: 1 },
{ geometry: 'point', color: '#5AD8A6', yAxisIndex: 1 },
],
});
dualAxes.render();
```
在上面的代码中,我们使用了 `DualAxes` 类来创建一个双轴图表,并且将 `yField` 设置为一个数组,数组中包含了需要展现的两个 y 轴的数据字段。同时,我们也可以通过 `yAxisIndex` 配置不同的 y 轴。
注意,如果你使用的是 G2Plot 2.x 版本,双轴图表的类名为 `DualLine`。
阅读全文