美文网首页
图表刻度算法

图表刻度算法

作者: 紫阚 | 来源:发表于2017-02-15 18:23 被阅读158次
背景

绘制柱状图、折线图的时候,需要根据数据,动态生成刻度的区间

需求

刻度美观、数据最大的柱状图落在顶部的区间,刻度的数量是固定的。

根据数据渲染刻度
结果预览

固定5个刻度区间,数据最大值与刻度之间的偏移对比如下

输入 每块偏移 第1段 第2段 第3段 第4段 第5段
4 1 1 2 3 4 5
27 6 6 12 18 24 30
174 35 35 70 105 140 175
13500 3000 3000 6000 9000 12000 15000
思路

区间之间的偏移量,为了美观,定义如下

单位数偏移量1~9,参考图表4、27输入
两位数开始:偏移量第二位是5的倍数,第二位以后0,如10、15、20...95 ;三位数100、150、200...950,参考图表174、13500输入

实现算法

核心就是根据最大值/区间得出偏移量,再循环从美观的偏移量里面找到离该值最近的一个大偏移量。
代码是基于java,但是对平台的依赖很少,很容易改改就移植到ios、.net上


 /**
     * 根据位数创建第一个为1的数字
     * <p>
     * 2700 =>1000
     *
     * @param delta
     * @return
     */
    public static int refreshNumber(double delta) {
        int i = 1;

        while (delta >= 10) {
            delta /= 10;
            i *= 10;
        }
        return i;
    }


    /**
     * 获取刻度的区间
     *
     * @param rangeCount 一共几个刻度从底部0开始算,比如0,20,40,60,80,100算6个,之所以不算5个是为了兼容后续的优化
     * @param maxValue   最大值
     * @return
     */
    public static List<Integer> getChartRange(int rangeCount, double maxValue) {
        int resultDelta = 0;
        boolean isFound = false;

        double delta = maxValue / (rangeCount - 1);
        if (delta == 0) delta = 1;

        //从1开始,跳过重复计算,比如delta是2700,则shift从1000开始
        int shift = refreshNumber(delta);

        while (true) {
            //个位数从1~9
            //从10位开始,从10~95 以此类推100~950
            for (float i = 0; i < 10; i += 0.5f) {
                //个位数时9.5会强转成9,相当于9计算了两次,因此不会产生浮点刻度的问题
                resultDelta = (int) (i * shift);

                //找到离自己最大的一个推荐刻度
                if (delta <= resultDelta) {
                    isFound = true;
                    break;
                }
            }
            if (isFound) break;

            shift *= 10;
        }
        List<Integer> list = new ArrayList<>(rangeCount);

        for (int i = 0; i < rangeCount; i++) {
            list.add(i * resultDelta);
        }
        return list;
    }

后续优化

  1. 对浮点型支持,这个很好做,主要是把shift改成0.1f就好了。
  2. 对于差异比较小的大数据进行对比,比如一组数据:331000,331100,331200;这个如果从0开始算的话,视觉上差异很小,这个时候如果换成从331000开始计算,这样对比差异就很直观。方法里我预留了第0个的位置的初衷就是如此。

相关文章

  • 图表刻度算法

    背景 绘制柱状图、折线图的时候,需要根据数据,动态生成刻度的区间 需求 刻度美观、数据最大的柱状图落在顶部的区间,...

  • 线性刻度写作法

    图:丹菡 文:闫寒 用图表达闫寒老师分享《线性刻度写作法》。 附:闫寒:线性刻度写作法的由来 线性刻度写作法是我给...

  • 3.4 刻度、注解、图表输出

    1--刻度 2--导出图片 3--注解

  • 专业化图表

    一、图表组成要素 标题、图例、单位、脚注、资料来源。 二、各图表注意事项: 1.饼图: 要按照时针表盘的刻度,把数...

  • 一、Matplotlib基础知识

    Matplotlib中的基本图表包括的元素x轴和y轴水平和垂直的轴线x轴和y轴刻度刻度标示坐标轴的分隔,包括最小刻...

  • 在Octave中绘制图表

    cd,路径命令。figure,suplot(1,2,1),将图像分成格子。axis,改变轴的刻度。clf,清除图表...

  • 图表简化和配色

    图表简化 四个步骤 1. 去掉背景的网格线视图 -- 网格线2. 删减冗余的刻度和网格线合理调整刻度3. 统一字体...

  • 4-Matplotlib刻度、注解、图表输出

    主刻度、次刻度

  • HignCharts:实现刻度在顶部的图表

    之前项目中就已经引入了HignCharts进行图表绘制,也写过一篇HignCharts:线形图饼图绘制及时间等定制...

  • Python中坐标轴刻度的设置与调整丨数析学院

    本节将向大家演示在 Python 中如何运用 Matplotlib 库设置图表中的坐标轴刻度。首先,我们需要在 P...

网友评论

      本文标题:图表刻度算法

      本文链接:https://www.haomeiwen.com/subject/yiwqwttx.html