当前位置: 首页 > 工具软件 > g2log > 使用案例 >

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

董胡媚
2023-12-01

参考: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) { 
                index = i;
                break
            }
        }
    } else {
        for (let i = index; i > 0 ; i--) {
            console.log(i);
            if (snapArray[i] < actNum) { 
                index = i;
                break;
            }
        } 
    }
    return snapArray[index] // 返回最接近的数值
}

/**
 * 根据传入值 获取该值下的 坐标最大或最小值
 * @param {number} tickInterval  坐标区间范围值
 * * @param {number} actNumber  传入值
 * @param {String} math floor 向下逼近  ceil 向上逼近
 */
export const snapMultiple = (tickInterval: number, actNum: number, math: string)=> {
    let num = 0;
    if(math == 'ceil') {
        while(num < actNum){  
            num = num + tickInterval
        }
        return num
    } else {
        while(num < actNum){  
            num = num + tickInterval
        }
        return num - tickInterval
        
    }
   
}

/**
 * 获取坐标轴最大值
 * @param {number} max  最大值
 * @param {number} min  最小值
 * @param {number} tickCount    //预设坐标数量
 */
export const getScaleMax = (max: number, min: number, tickCount: number) => {
    if ((max - min) < (tickCount - 1) ) {
        return max
    }
    let tickInterval = (max - min) / (tickCount - 1);
    const factor = getFactor(tickInterval); 
    const snapValue = snap(tickInterval / factor, 'floor'); 
    tickInterval = snapValue * factor;
    max = snapMultiple(tickInterval, max, 'ceil'); // 向上取tickInterval的整数倍,
    return max
}

        在视图的地方直接引用

import { getScaleMax } from '@/utils/scale';        
const max = getScaleMax(minData, maxData,tickCount); //传入图表数据的最小值和最大值,返回坐标系最大值
const tickCount = 6;
const chart = new Chart({
                    container: 'c1',
                    autoFit: true,
                    height: 390,
                });
chart.scale({
      dateStr: {
            nice: true
       },
       activeAmount: {    //你的坐标key 值
             nice: true,
             alias: "激活量",
             max,
             tickCount
       },
       applyAmount: {
            nice: true,
            alias: "申请量",
            max,
            tickCount
        },   
       });
chart.render();

 

 类似资料: