antv g2plot 2.4.7版本画折柱图,折线图就脱离出去了
时间: 2024-02-21 15:02:27 浏览: 108
画柱状图,折线图
4星 · 用户满意度95%
您好,关于您的问题,可以通过在 G2Plot 中设置 `isStack` 属性为 `false` 来实现折柱图,同时也可以设置 `connectNulls` 属性为 `true` 来连接空值,从而避免折线图脱离。具体实现可以参考以下代码:
```javascript
import { Line, Column } from '@antv/g2plot';
const data = [
{ year: '1951 年', sales: 38 },
{ year: '1952 年', sales: 52 },
{ year: '1956 年', sales: 61 },
{ year: '1957 年', sales: 145 },
{ year: '1958 年', sales: 48 },
{ year: '1959 年', sales: 38 },
{ year: '1960 年', sales: 38 },
{ year: '1962 年', sales: 38 },
];
const linePlot = new Line('container', {
data,
xField: 'year',
yField: 'sales',
connectNulls: true,
});
const columnPlot = new Column('container', {
data,
xField: 'year',
yField: 'sales',
isStack: false,
});
linePlot.render();
columnPlot.render();
```
在上述代码中,我们先分别创建了折线图和折柱图,然后针对折线图设置了 `connectNulls` 属性为 `true`,针对折柱图设置了 `isStack` 属性为 `false`。这样就可以同时展示折线和柱状图了。
阅读全文