G2根据最小值和最大值动态配置坐标系

最新推荐文章于 2025-09-30 22:56:28 发布

原创

最新推荐文章于 2025-09-30 22:56:28 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化

本文介绍如何使用 G2 库根据数据的最小值和最大值动态调整坐标系。通过参考官方文档和源码 `scale.ts`，在视图配置中实现数据驱动的坐标轴范围设定，确保数据的完整展示。

参考：https://g2.antv.vision/zh/docs/manual/concepts/data-and-scales#%E8%BF%9E%E7%BB%AD%E6%95%B0%E6%8D%AE%E5%BA%A6%E9%87%8F%E7%9A%84%E8%AE%A1%E7%AE%97

直接上源码scale.ts

const snapArray = [0, 2, 5, 10];  //逼近值数组，保证能被2和5整除

const getFactor = (tickInterval: number)=> {
    let num = 1;
    while(tickInterval > 10 || tickInterval < 1){  //tickInterval在1-10之间才停止循环
        tickInterval = tickInterval/10;
        num = num * 10
    }
    return num   
}

/**
 * 获取逼进值
 * @param {number} actNum
 * @param {String} math floor 向下逼近  ceil 向上逼近
 */
const snap = (actNum: number, math: string)=> {
    let index = math == 'ceil' ? 0 : snapArray.length - 1;
    if(math == 'ceil') {
        for (let i = 0; i < snapArray.length; i++) {
            if (snapArray[i] > actNum) { 
                inde