AntV G2 分组柱状图和折线图混合画法
时间: 2024-01-13 13:03:40 浏览: 46
AntV G2 是一款基于图形语法的可视化图表库,支持绘制多种类型的图表,包括柱状图、折线图等。要绘制分组柱状图和折线图混合的图表,可以使用 G2 的 ComboChart 组件。
首先,需要定义数据源,并指定数据字段的类型(例如 x 轴、y 轴等)。接着,可以使用 ComboChart 组件来绘制混合的图表。在 ComboChart 中,可以分别指定柱状图和折线图的样式、颜色等属性,如下所示:
```javascript
import { Chart } from '@antv/g2';
const data = [
{ year: '2010', sales: 450, profit: 200 },
{ year: '2011', sales: 560, profit: 230 },
{ year: '2012', sales: 620, profit: 250 },
{ year: '2013', sales: 750, profit: 300 },
{ year: '2014', sales: 800, profit: 350 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
height: 400,
});
chart.data(data);
chart.scale({
sales: {
min: 0,
},
profit: {
min: 0,
},
});
chart.axis('year', {
label: {
style: {
fill: '#aaaaaa',
},
},
});
chart.line().position('year*profit').color('#fdae6b');
chart.interval().position('year*sales').color('#2c7bb6');
chart.render();
```
在上面的代码中,我们定义了一个数据源,并指定了 x 轴和 y 轴的数据字段。接着,创建一个 Chart 实例,并指定容器,然后设置数据源和坐标轴的样式。最后,使用 line() 和 interval() 方法分别绘制折线图和柱状图,并指定它们的位置和颜色。
需要注意的是,ComboChart 支持多种混合图表类型,包括折线图、柱状图、面积图等,可以根据自己的需求选择适合的图表类型。