|
G2混合图
AntV G2实现柱状折线混合图比较简单，只需要设置position里面的值就可以了。 案例里面有个双轴图表：https://antv-g2.gitee.io/zh/examples/other/other#double-axes
 按照上面的模式自己设置一个双轴混合图。分了三组数据，A，B，C。A是柱子，B和C是line加area的形式。
let data = [
{ genre: 'Sports', sold: 275, type: "A" },
{ genre: 'Strategy', sold: 215, type: "A" },
{ genre: 'Action', sold: 180, type: "A" },
{ genre: 'Shooter', sold: 150, type: "A" },
{ genre: 'Other', sold: 100, type: "A" },
{ genre: 'Sports', sold: 175, type: "B" },
{ genre: 'Strategy', sold: 175, type: "B" },
{ genre: 'Action', sold: 246, type: "B" },
{ genre: 'Shooter', sold: 150, type: "B" },
{ genre: 'Other', sold: 250, type: "B" },
{ genre: 'Sports', value: 10, type: "C" },
{ genre: 'Strategy', value: 20, type: "C" },
{ genre: 'Action', value: 30, type: "C" },
{ genre: 'Shooter', value: 40, type: "C" },
{ genre: 'Other', value: 50, type: "C" },
]
const chart = new G2.Chart({
container: 'c2',
width: 600,
height: 300,
});
chart.data(data);
chart.scale('sold', {
nice: true,
min:0
});
chart.interval().position('genre*value');
chart.line().position('genre*sold').color('type')//.adjust('stack')
chart.area().position('genre*sold').color('type')//.adjust('stack')
看起来有点乱。
如果我再加一个轴呢？右边的两个Y轴重叠一起了，看起来更乱，其实就算是双轴的时候，也不易区分那个表对应的是左边还是右边的轴。所以啊，双轴慎用，混合也少用。
G2Plot混合图
用G2Plot来生成混合图表，再等等吧，各种文档api还在开发中，bug还有一堆没修复。G2Plot的数据绑定后，完全没有像g2中position一样的配置，所以数据驱动，驱动成这样子了？ 
不过在G2Plot的Rect版本中已经有混合图了，他们优先开发了rect版本，因为阿里就是死磕Rect，其他的版本慢慢等吧。看了一眼他们的计划，开发中、bug以及设计修改中……
geometryOptions 可选, array object 功能描述： 指定了双轴各自对应的图形，第一项为左轴配置，第二项为右轴配置。每一个配置应为 Line 或 Column 类型的 Config 单轴支持图形范围包括折线图，多折线图，柱状图，分组柱状图，堆叠柱状图。
 G2Plot 2.0.5 版本的案例中加了双轴图： theme: ‘dark’ 还没修复。 
|