Google Charts是否可为不同数据系列配置两个独立的垂直轴(vAxis)?
Google Charts ComboChart支持为不同数据系列绑定独立的垂直坐标轴,你需要的双刻度效果可通过如下配置实现:
配置逻辑
- 在配置项的
vAxis字段中声明两个轴配置,索引0对应左侧坐标轴,索引1对应右侧坐标轴,可分别为两个轴设置数值范围、样式等属性 - 为每个数据系列添加
targetAxisIndex属性,指定该系列绑定的坐标轴索引即可
调整后的完整配置示例
options:{ seriesType: 'area', // 定义两套垂直轴 vAxis: [ // 索引0:左轴,对应ADX折线 { minValue: 0, maxValue: 60, textStyle: { color: 'blue' } // 可和折线颜色统一,方便识别 }, // 索引1:右轴,对应Momentum面积图,数值范围按需调整 { minValue: 0, maxValue: 200, // 替换为你实际业务的最大值即可 textStyle: { color: 'green' } // 可和面积图颜色统一 } ], series: { // 第一个系列:ADX折线,绑定左轴 0: { type: 'line', color: 'blue', targetAxisIndex: 0 }, // 第二个系列:Momentum面积图,绑定右轴 1: { targetAxisIndex: 1 } } };
如果不需要显示某一侧的轴刻度,可在对应vAxis配置中添加textPosition: 'none'属性隐藏。
内容的提问来源于stack exchange,提问作者Yogurtu
相关产品推荐
相关产品推荐

