资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/在微信小程序中绘制图表（part2）

在微信小程序中绘制图表（part2）

canopus4u / 1724人阅读

摘要：本期大纲确定纵坐标的范围并绘制根据真实数据绘制折线相关阅读在微信小程序中绘制图表在微信小程序中绘制图表关注我的项目查看完整代码。相关阅读在微信小程序中绘制图表在微信小程序中绘制图表

本期大纲

1、确定纵坐标的范围并绘制

2、根据真实数据绘制折线

相关阅读：
在微信小程序中绘制图表（part1）
在微信小程序中绘制图表（part3）

 关注我的 github 项目 查看完整代码。
确定纵坐标的范围并绘制

为了避免纵坐标的刻度出现小数的情况，我们把纵坐标分为5个区块，我们取最小单位刻度为例如10（能够被5整除），当然真实情况会比这复杂，待会儿我们再讨论。

所以我们的处理输入输出应该是下面的结果

(5, 34.1)  => (10, 40)
(10, 34)   => (10, 40)
(-5.1, 40) => (-10, 40)
// 确定Y轴取值范围
function findRange (num, type, limit) {
    limit = limit || 10;
    
    // upper向上查找，lower向下查找
    type = type ? type : "upper";

    // 进行取整操作，避免while时进入死循环
    if (type === "upper") {
        num = Math.ceil(num);
    } else {
        num = Math.floor(num);
    }
    while (num % limit !== 0) {
        if (type === "upper") {
            num++;
        } else {
            num--;
        }
    }

    return num;
}

好了，初步的确定范围已经完成了，但是细想一下这个范围还是不是很理想，比如用户传入的数据都是小数级别的，比如 (0.2, 0.8)，我们输出的范围是(0, 5)这个范围偏大，图表展现的效果则会是上面有大部分的留白，同样用户输入的数据很大，比如(10000, 18000)，我们得到的范围是(10000, 18010)，这个范围则没什么意义，所以我们需要根据传入的数据的范围来分别确定我们的最小单位刻度。

规定我们的参数格式是这样的：

opts = {
    ...
    series: [{
            ...
            data: [15, 20, 45, 37, 4, 80]
        }, {
            ...
            data: [70, 40, 65, 100, 34, 18]
        }
    ]
}

让我们继续进行优化

// 合并数据，将series中的每项data整合到一个数组当中
function dataCombine(series) {
    return series.reduce(function(a, b) {
        return (a.data ? a.data : a).concat(b.data);
    }, []);
}

// 根据数据范围确定最小单位刻度
function getLimit (maxData, minData)
    var limit = 0;
    var range = maxData - minData;
    if (range >= 10000) {
        limit = 1000;
    } else if (range >= 1000) {
        limit = 100;
    } else if (range >= 100) {
        limit = 10;
    } else if (range >= 10) {
        limit = 5;
    } else if (range >= 1) {
        limit = 1;
    } else if (range >= 0.1) {
        limit = 0.1;
    } else {
        limit = 0.01;
    }
}

var dataList = dataCombine(opts.series);
// 获取传入数据的最小值
var minData = Math.min.apply(this, dataList);
// 获取传入数据的最大值
var maxData = Math.max.apply(this, dataList);

var limit = getLimit(maxData, minData);

var minRange = findRange(minData, "lower", limit);
var maxRange = findRange(maxData, "upper", limit);

现在我们动态的确定除了合适的最小刻度范围，接下来我们接着优化一下上面的findRange方法，主要是增加对小数的支持

function findRange (num, type, limit) {
    limit = limit || 10;
    type = type ? type : "upper";
    var multiple = 1;
    while (limit < 1) {
        limit *= 10;
        multiple *= 10;
    }
    if (type === "upper") {
        num = Math.ceil(num * multiple);
    } else {
        num = Math.floor(num * multiple);
    }
    while (num % limit !== 0) {
        if (type === "upper") {
            num++;
        } else {
            num--;
        }
    }

    return num / multiple;
}

现在我们已经确定好了Y轴的取值范围，关于如何画出Y轴可以参看 part1 中X轴的绘制方法，此处不再累赘。

Y轴效果图：

opts = {
    ...
    series: [{
            ...
            data: [15, 20, 45, 37, 4, 80]
        }, {
            ...
            data: [70, 40, 65, 100, 34, 18]
        }
    ]
}

opts = {
    ...
    series: [{
            ...
            data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8]
        }, {
            ...
            data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94]
        }
    ]
}

效果还不错，我们接着往下

根据真实数据绘制折线

问题的关键在于确定每个数据点的(x, y)坐标，x坐标比较好确定，我们根据画布的宽度以及opts.categories即可确定。

规定我们的配置为：

config = {
    xAxisHeight: 30, // X轴高度
    yAxisWdith: 30   // Y轴宽度
}
var data = [15, 20, 45, 37, 4, 80];
var xPoints = [];
var validWidth = opts.width - config.yAxisWidth;
var eachSpace = validWidth / opts.categories.length;
var start = config.yAxisWidth;

data.forEach(function (item, index) {
    xPoints.push(start + (index + 0.5) * eachSpace);
});

y坐标稍微会复杂一点，需要根据Y轴的范围已经本身的数值进行计算得出。

所以我们计算出的y应该为

y = validHeight * (data - min) / (max - min);
// 由于canvas画布是左上角为原点坐标，故我们变化一下
// 得到最终的y绘制点
y = valideHeight - y;

代码如下：

var data = [15, 20, 45, 37, 4, 80];
var yPoints = [];
var validHeight = opts.height - config.xAxisHeight;
data.forEach(function(item) {
    var y = validHeight * (item - min) / (max - min);
    y = validHeight - y;

    yPoints.push(y);
}

现在我们已经确定了数据点在画布上的绘制坐标，关于如何绘制折现请查看 part1 中相关内容，此处不再累赘。

最终效果图如下：

预告：下一部分我们一起讨论绘制过程中的一些技巧、动画效果和如何工程化我们的项目。

相关阅读 
在微信小程序中绘制图表（part1）
在微信小程序中绘制图表（part3）
混合云 专线服务 微信小程序怎么在电脑中打开使用 微信小程序支付 微信小程序部署 微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91259.html

相关文章

  • 在微信小程序中绘制图表（part2）

    摘要：本期大纲确定纵坐标的范围并绘制根据真实数据绘制折线相关阅读在微信小程序中绘制图表在微信小程序中绘制图表关注我的项目查看完整代码。相关阅读在微信小程序中绘制图表在微信小程序中绘制图表 本期大纲 1、确定纵坐标的范围并绘制 2、根据真实数据绘制折线 相关阅读：在微信小程序中绘制图表（part1）在微信小程序中绘制图表（part3） 关注我的 github 项目 查看完整代码。 确定纵坐...

    Youngs 评论0 收藏0

  • 在微信小程序中绘制图表（part1）

    摘要：微信小程序中提供了的支持，利用自行绘制图表。关注我的项目查看完整代码。 微信小程序中图表现状 由于微信小程序本身框架的限制，很难集成目前已有的图表工具，显示图表目前有两种方案：1、服务器端渲染图表，输出图片，微信小程序中直接显示渲染好的图片，比如highcharts提供了服务端渲染的能力hightcharts server render，这种方式需要后台有一套渲染服务，并且有一定的网络...

    chaosx110 评论0 收藏0

  • 在微信小程序中绘制图表（part1）

    摘要：微信小程序中提供了的支持，利用自行绘制图表。关注我的项目查看完整代码。 微信小程序中图表现状 由于微信小程序本身框架的限制，很难集成目前已有的图表工具，显示图表目前有两种方案：1、服务器端渲染图表，输出图片，微信小程序中直接显示渲染好的图片，比如highcharts提供了服务端渲染的能力hightcharts server render，这种方式需要后台有一套渲染服务，并且有一定的网络...

    miqt 评论0 收藏0

  • 在微信小程序中绘制图表（part3）

    摘要：本期大纲饼图绘制如何添加动画效果使用构建项目相关阅读在微信小程序中绘制图表在微信小程序中绘制图表关注我的项目查看完整代码。 本期大纲 1、饼图绘制2、如何添加动画效果3、使用rollup构建项目 相关阅读：在微信小程序中绘制图表（part1）在微信小程序中绘制图表（part2） 关注我的 github 项目 查看完整代码。 很久没更新了，最近事情比较多，今天来把坑填上！ 饼图绘制 ...

    褰辩话 评论0 收藏0

  • 在微信小程序中绘制图表（part3）

    摘要：本期大纲饼图绘制如何添加动画效果使用构建项目相关阅读在微信小程序中绘制图表在微信小程序中绘制图表关注我的项目查看完整代码。 本期大纲 1、饼图绘制2、如何添加动画效果3、使用rollup构建项目 相关阅读：在微信小程序中绘制图表（part1）在微信小程序中绘制图表（part2） 关注我的 github 项目 查看完整代码。 很久没更新了，最近事情比较多，今天来把坑填上！ 饼图绘制 ...

    Yumenokanata 评论0 收藏0

发表评论

登陆后可评论

0条评论

canopus4u

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<